<div id="mediq-dashboard" dir="rtl">

<style>

/* ============================================================
   MEDIQ DASHBOARD - SUPPLY
   PRESENTATION VERSION
   ============================================================ */

#mediq-dashboard,
#mediq-dashboard * {
    box-sizing: border-box;
}

#mediq-dashboard {

    --navy: #073553;
    --navy-dark: #062d49;

    --primary: #08b9b0;
    --primary-dark: #069e98;

    --text: #173b59;
    --muted: #748b9e;

    --border: #dce9ef;

    --bg: #f4f9fb;
    --white: #ffffff;

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 9999;

    overflow: hidden;

    direction: rtl;

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 12% 4%,
            rgba(9,185,176,.09),
            transparent 27%
        ),
        #f4f9fb;
}


/* ============================================================
   HIDE CONFLUENCE
   ============================================================ */

html,
body,
#page,
#full-height-container,
#main,
#content,
#main-content,
.aui-page-panel,
.aui-page-panel-inner,
.aui-page-panel-content,
.content-body {

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

html,
body {
    overflow: hidden !important;
}

#footer,
footer,
.aui-footer,
#header,
#main-header,
.breadcrumbs,
#breadcrumbs,
.page-metadata {

    display: none !important;
}


/* ============================================================
   APP
   ============================================================ */

.mq-app {

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        255px;

    direction: ltr;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.mq-sidebar {

    grid-column: 2;

    height: 100vh;

    padding:
        24px
        17px;

    direction: rtl;

    color: #fff;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            #073b5c 0%,
            #062e4a 100%
        );

    box-shadow:
        -12px 0 45px
        rgba(7,53,83,.11);
}


/* LOGO */

.mq-logo {

    width: 100%;

    text-align: center;

    padding:
        3px
        5px
        22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}

.mq-logo img {

    width: 174px;

    max-width: 92%;

    height: auto;
}


/* USER */

.mq-user {

    margin-top: 17px;

    padding:
        14px
        15px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid
        rgba(255,255,255,.08);
}

.mq-user-name {

    font-size: 12px;

    font-weight: 900;
}

.mq-user-role {

    margin-top: 6px;

    color:
        rgba(255,255,255,.58);

    font-size: 9px;

    font-weight: 600;
}


/* ============================================================
   LIFE CYCLE
   ============================================================ */

.mq-life-title {

    margin:
        26px
        7px
        9px;

    color:
        rgba(255,255,255,.39);

    font-size: 9px;

    font-weight: 700;
}


.mq-life {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.mq-life-item {

    position: relative;

    min-height: 46px;

    padding:
        0
        13px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.69);

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    user-select: none;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}


.mq-life-item:hover {

    color: #fff;

    background:
        rgba(255,255,255,.075);
}


.mq-life-item.active {

    color: #fff;

    background:
        linear-gradient(
            90deg,
            #08b9b0,
            #079e99
        );

    box-shadow:
        0 10px 23px
        rgba(8,185,176,.18);
}


.mq-life-icon {

    width: 28px;
    height: 28px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,.07);
}


.mq-life-item.active
.mq-life-icon {

    background:
        rgba(255,255,255,.14);
}


.mq-life-icon svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   LOGOUT
   ============================================================ */

.mq-sidebar-bottom {

    margin-top: auto;
}


.mq-logout {

    min-height: 43px;

    padding:
        0
        13px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255,255,255,.65);

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


.mq-logout:hover {

    color: #fff;

    background:
        rgba(255,255,255,.07);
}


/* ============================================================
   MAIN
   ============================================================ */

.mq-main {

    grid-column: 1;

    height: 100vh;

    direction: rtl;

    overflow-y: auto;

    padding:
        0
        clamp(25px,4vw,55px)
        45px;
}


/* ============================================================
   HEADER
   ============================================================ */

.mq-header {

    min-height: 88px;

    border-bottom:
        1px solid
        var(--border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.mq-header-right {

    min-width: 0;
}


.mq-page-title {

    color:
        var(--navy);

    font-size: 20px;

    font-weight: 900;
}


.mq-page-description {

    margin-top: 6px;

    color:
        var(--muted);

    font-size: 10px;

    font-weight: 600;
}


/* CENTER */

.mq-center {

    padding:
        10px
        14px;

    border:
        1px solid
        var(--border);

    border-radius: 11px;

    background: #fff;

    color:
        #536f84;

    font-size: 10px;

    font-weight: 700;
}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.mq-breadcrumb {

    min-height: 54px;

    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


.mq-bread-item {

    color:
        #8197a8;

    font-size: 10px;

    font-weight: 700;
}


.mq-bread-current {

    color:
        var(--primary-dark);

    font-weight: 900;
}


.mq-bread-separator {

    color:
        #b6c4cf;
}


/* ============================================================
   HERO
   ============================================================ */

.mq-hero {

    position: relative;

    overflow: hidden;

    min-height: 112px;

    padding:
        21px
        24px;

    border-radius: 18px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        linear-gradient(
            105deg,
            #073b5c,
            #087c7d
        );

    box-shadow:
        0 15px 35px
        rgba(7,53,83,.10);
}


.mq-hero::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: -70px;
    top: -150px;

    border-radius: 50%;

    background:
        rgba(16,222,205,.14);
}


.mq-hero-title {

    position: relative;

    z-index: 2;

    font-size: 16px;

    font-weight: 900;
}


.mq-hero-desc {

    position: relative;

    z-index: 2;

    margin-top: 6px;

    color:
        rgba(255,255,255,.70);

    font-size: 10px;
}


.mq-back-btn {

    position: relative;

    z-index: 2;

    display: none;

    min-width: 88px;
    height: 36px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 10px;

    background:
        rgba(255,255,255,.10);

    color: #fff;

    font-family:
        inherit;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.mq-back-btn:hover {

    background:
        rgba(255,255,255,.16);
}


/* ============================================================
   CONTENT
   ============================================================ */

.mq-view {

    margin-top: 23px;

    animation:
        mqFade
        .22s ease;
}


@keyframes mqFade {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ============================================================
   SECTION HEADER
   ============================================================ */

.mq-section-head {

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.mq-section-title {

    color:
        var(--navy);

    font-size: 14px;

    font-weight: 900;
}


.mq-section-desc {

    margin-top: 4px;

    color:
        var(--muted);

    font-size: 9px;
}


/* ============================================================
   MODULE CARDS
   ============================================================ */

.mq-card-grid {

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 14px;
}


.mq-module-card {

    position: relative;

    min-height: 176px;

    padding:
        18px;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background: #fff;

    cursor: pointer;

    box-shadow:
        0 9px 26px
        rgba(19,65,90,.035);

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        border-color .17s ease;
}


.mq-module-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(8,185,176,.45);

    box-shadow:
        0 18px 40px
        rgba(19,65,90,.08);
}


.mq-module-icon {

    width: 48px;
    height: 48px;

    margin-bottom: 17px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--primary-dark);

    background:
        linear-gradient(
            145deg,
            #e9fbf9,
            #d9f7f3
        );
}


.mq-module-icon svg {

    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.mq-module-name {

    color:
        var(--navy);

    font-size: 12px;

    font-weight: 900;

    line-height: 1.8;
}


.mq-module-arrow {

    position: absolute;

    left: 18px;
    bottom: 17px;

    width: 29px;
    height: 29px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #8ea5b5;

    background:
        #f3f7f9;

    font-size: 18px;
}


.mq-module-card:hover
.mq-module-arrow {

    color: #fff;

    background:
        var(--primary);
}


/* ============================================================
   LARGE ACTION CARDS
   ============================================================ */

.mq-action-grid {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 15px;
}


.mq-action-card {

    min-height: 155px;

    padding:
        19px;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background: #fff;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 16px;

    transition: .17s;
}


.mq-action-card:hover {

    border-color:
        rgba(8,185,176,.45);

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(24,74,98,.06);
}


.mq-action-icon {

    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--primary-dark);

    background:
        #e7faf8;
}


.mq-action-icon svg {

    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.mq-action-title {

    color:
        var(--navy);

    font-size: 13px;

    font-weight: 900;
}


.mq-action-sub {

    margin-top: 6px;

    color:
        var(--muted);

    font-size: 9px;
}


/* ============================================================
   ASSET LIST MENU
   ============================================================ */

.mq-list-layout {

    display: grid;

    grid-template-columns:
        330px
        minmax(0,1fr);

    gap: 16px;

    direction: ltr;
}


.mq-list-menu,
.mq-preview {

    direction: rtl;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 10px 28px
        rgba(19,65,90,.035);
}


.mq-list-menu {

    padding: 13px;
}


.mq-list-option {

    min-height: 52px;

    margin-bottom: 5px;

    padding:
        0
        13px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:
        #536f84;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

    transition: .15s;
}


.mq-list-option:hover {

    color:
        var(--primary-dark);

    background:
        #f1faf9;
}


.mq-list-option.active {

    color:
        #087f7a;

    background:
        #e9f9f7;
}


.mq-option-badge {

    width: 26px;
    height: 26px;

    border-radius: 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(8,185,176,.09);

    color:
        var(--primary-dark);
}


/* ============================================================
   PREVIEW
   ============================================================ */

.mq-preview {

    min-height: 390px;

    padding:
        23px;
}


.mq-preview-title {

    color:
        var(--navy);

    font-size: 14px;

    font-weight: 900;
}


.mq-preview-description {

    margin-top: 7px;

    color:
        var(--muted);

    font-size: 9px;
}


/* MOCK CONTENT */

.mq-demo-box {

    margin-top: 23px;

    padding: 20px;

    border:
        1px dashed
        #bdd4df;

    border-radius: 14px;

    background:
        #f8fbfc;
}


.mq-demo-icon {

    width: 48px;
    height: 48px;

    margin:
        0
        auto
        12px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--primary-dark);

    background:
        #e6f9f7;
}


.mq-demo-text {

    color:
        #557287;

    text-align: center;

    font-size: 10px;

    line-height: 2;
}


.mq-demo-button {

    display: block;

    min-width: 125px;

    height: 38px;

    margin:
        17px
        auto
        0;

    border: 0;

    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #08aaa4,
            #0bc1b8
        );

    color: #fff;

    font-family: inherit;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


/* ============================================================
   PLACEHOLDER LIFE CYCLE
   ============================================================ */

.mq-empty-cycle {

    min-height: 350px;

    border:
        1px dashed
        #c7dce5;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    background:
        rgba(255,255,255,.65);

    color:
        #7890a2;
}


.mq-empty-cycle strong {

    color:
        var(--navy);

    font-size: 15px;
}


.mq-empty-cycle span {

    margin-top: 8px;

    font-size: 10px;
}


/* ============================================================
   TOAST
   ============================================================ */

.mq-toast {

    position: fixed;

    left: 30px;
    bottom: 27px;

    z-index: 10020;

    min-width: 260px;

    max-width: 360px;

    padding:
        13px
        16px;

    border-radius: 11px;

    color: #fff;

    background:
        #073b5c;

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.15);

    font-size: 10px;

    font-weight: 700;

    opacity: 0;

    transform:
        translateY(12px);

    pointer-events: none;

    transition:
        .2s;
}


.mq-toast.show {

    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1300px) {

    .mq-card-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:1000px) {

    .mq-app {
        grid-template-columns:
            minmax(0,1fr)
            210px;
    }

    .mq-list-layout {
        grid-template-columns:
            280px
            minmax(0,1fr);
    }

}


@media(max-width:800px) {

    .mq-sidebar {
        display: none;
    }

    .mq-app {
        display: block;
    }

    .mq-main {
        width: 100%;
    }

    .mq-card-grid,
    .mq-action-grid,
    .mq-list-layout {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   MEDIQ SIDEBAR NAVIGATION TREE
   ============================================================ */

.mq-life-title,
.mq-life {
    display: none !important;
}

.mq-tree-title {
    margin: 22px 7px 9px;
    color: rgba(255,255,255,.39);
    font-size: 9px;
    font-weight: 700;
}

.mq-tree {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 2px;
    scrollbar-width: thin;
}

.mq-tree::-webkit-scrollbar {
    width: 4px;
}
.mq-tree::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 10px;
}

.mq-tree-row {
    min-height: 38px;
    padding: 0 10px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.70);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease;
}

.mq-tree-row:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
}

.mq-tree-row.active {
    color: #fff;
    background: linear-gradient(90deg,#08b9b0,#079e99);
}

.mq-tree-row.parent-active:not(.active) {
    color: #fff;
    background: rgba(255,255,255,.055);
}

.mq-tree-row.level-1 { padding-right: 10px; }
.mq-tree-row.level-2 { padding-right: 23px; font-size: 9.5px; }
.mq-tree-row.level-3 { padding-right: 36px; font-size: 9px; }
.mq-tree-row.level-4 { padding-right: 49px; font-size: 8.7px; color: rgba(255,255,255,.60); }

.mq-tree-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
}

.mq-tree-row.active .mq-tree-dot {
    background: #fff;
}

.mq-tree-arrow {
    margin-right: auto;
    color: rgba(255,255,255,.45);
    font-size: 13px;
    transition: transform .18s ease;
}

.mq-tree-row.open > .mq-tree-arrow {
    transform: rotate(90deg);
}

.mq-tree-children {
    display: none;
    margin-top: 2px;
}

.mq-tree-children.open {
    display: block;
}

.mq-tree-separator {
    height: 1px;
    margin: 8px 9px;
    background: rgba(255,255,255,.08);
}


/* ============================================================
   MEDIQ UI POLISH - LARGER TYPOGRAPHY + TOP WELCOME
   ============================================================ */
#mediq-dashboard .mq-user-name { font-size: 15px; }
#mediq-dashboard .mq-user-role { font-size: 12px; }
#mediq-dashboard .mq-tree-title { font-size: 12px; }
#mediq-dashboard .mq-tree-row { font-size: 13px; min-height: 42px; }
#mediq-dashboard .mq-tree-row.level-2 { font-size: 12.5px; }
#mediq-dashboard .mq-tree-row.level-3 { font-size: 12px; }
#mediq-dashboard .mq-tree-row.level-4 { font-size: 11.7px; }
#mediq-dashboard .mq-logout { font-size: 13px; }
#mediq-dashboard .mq-page-title { font-size: 23px; }
#mediq-dashboard .mq-page-description { font-size: 13px; }
#mediq-dashboard .mq-center { font-size: 13px; }
#mediq-dashboard .mq-bread-item { font-size: 13px; }
#mediq-dashboard .mq-hero-title { font-size: 19px; }
#mediq-dashboard .mq-hero-desc { font-size: 13px; }
#mediq-dashboard .mq-back-btn { font-size: 13px; }
#mediq-dashboard .mq-section-title { font-size: 17px; }
#mediq-dashboard .mq-section-desc { font-size: 12px; }
#mediq-dashboard .mq-module-name { font-size: 15px; }
#mediq-dashboard .mq-action-title { font-size: 16px; }
#mediq-dashboard .mq-action-sub { font-size: 12px; }
#mediq-dashboard .mq-list-option { font-size: 13px; }
#mediq-dashboard .mq-preview-title { font-size: 17px; }
#mediq-dashboard .mq-preview-description,
#mediq-dashboard .mq-demo-text { font-size: 12px; }
#mediq-dashboard .mq-demo-button { font-size: 13px; }
#mediq-dashboard .mq-empty-cycle strong { font-size: 18px; }
#mediq-dashboard .mq-empty-cycle span { font-size: 13px; }
#mediq-dashboard .mq-toast { font-size: 13px; }

#mediq-dashboard .mq-header-welcome {
    display:flex; align-items:center; gap:9px; padding:9px 14px;
    border:1px solid rgba(8,185,176,.20); border-radius:999px;
    background:rgba(255,255,255,.82); box-shadow:0 7px 22px rgba(7,53,83,.055);
    color:#587287; font-size:13px; font-weight:700; white-space:nowrap;
}
#mediq-dashboard .mq-header-welcome strong { color:var(--navy); font-size:14px; font-weight:900; }
#mediq-dashboard .mq-welcome-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(8,185,176,.10); }
#mediq-dashboard .mq-header-left { display:flex; align-items:center; gap:10px; }
#mediq-dashboard .mq-module-card { box-shadow:0 10px 30px rgba(19,65,90,.05); }
#mediq-dashboard .mq-module-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(19,65,90,.10); }
#mediq-dashboard .mq-hero { box-shadow:0 18px 42px rgba(7,53,83,.12); }


/* ===== FINAL UI REFINEMENTS ===== */
#mediq-dashboard .mq-header { min-height: 92px; }
#mediq-dashboard .mq-header-left { margin-right:auto; }
#mediq-dashboard .mq-header-welcome { padding:10px 16px; }
#mediq-dashboard .mq-breadcrumb { min-height:46px; }
#mediq-dashboard .mq-hero { margin-top:14px; }
#mediq-dashboard .mq-tree { scrollbar-width:none; -ms-overflow-style:none; }
#mediq-dashboard .mq-tree::-webkit-scrollbar { display:none !important; width:0 !important; }
#mediq-dashboard .mq-sidebar { overflow:hidden; }


#mediq-dashboard .mq-bread-link {
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    border-radius: 7px;
    padding: 4px 6px;
}
#mediq-dashboard .mq-bread-link:hover {
    color: var(--primary) !important;
    background: rgba(8,185,176,.08);
}


/* MEDIQ -> CONFIFORMS BRIDGE */
.confiforms-registration-control {
    position: fixed !important;
    left: -10000px !important;
    top: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: auto !important;
}

/* ============================================================
   MEDIQ CONFIFORMS MODAL
   ============================================================ */
#mqCfModal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 35, 55, .48);
    backdrop-filter: blur(3px);
    direction: rtl;
}
#mqCfModal.open { display: flex; }

#mqCfDialog {
    width: min(620px, 94vw);
    max-height: 88vh;
    overflow: auto;
    background: #fff;
    border: 1px solid #dce9ef;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(3,35,55,.24);
}
#mqCfHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid #e4eef2;
}
#mqCfHeader strong {
    color: #073553;
    font-size: 16px;
    font-weight: 900;
}
#mqCfClose {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: #f1f6f8;
    color: #557287;
    font: 700 20px/34px Tahoma,Arial,sans-serif;
    cursor: pointer;
}
#mqCfClose:hover { background: #e6f4f4; color: #069e98; }
#mqCfBody { padding: 8px 18px 18px; }

/* The real ConfiForms registration panel is moved here at runtime */
#mqCfBody .confiFormsFormBorder {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
#mqCfBody .confiFormsFormTitle { display: none !important; }
#mqCfBody .confiFormsFormContent { padding: 16px 4px !important; }
#mqCfBody .confiFormsFormFooter {
    padding: 14px 4px 4px !important;
    background: transparent !important;
}
#mqCfBody table { width: 100% !important; }
#mqCfBody td {
    border: 0 !important;
    padding: 8px !important;
    text-align: right !important;
}
#mqCfBody input[type="text"],
#mqCfBody input[type="password"],
#mqCfBody textarea,
#mqCfBody select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 40px;
    border-radius: 9px !important;
    direction: rtl;
}
#mqCfBody .entry_metadata_button,
#mqCfBody .entry_metadata { display: none !important; }
#mqCfBody .save-cf-btn {
    min-width: 130px;
    min-height: 40px;
    border: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(90deg,#08aaa4,#0bc1b8) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    cursor: pointer;
}


/* ============================================================
   MEDIQ PURCHASED ASSETS LIST
   Source: ConfiForms TableView (mediqNewAsset)
   ============================================================ */
#mediq-dashboard .mq-assets-toolbar {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#mediq-dashboard .mq-assets-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#mediq-dashboard .mq-assets-count {
    color: #71899b;
    font-size: 12px;
    font-weight: 700;
}

#mediq-dashboard .mq-assets-btn {
    min-height: 38px;
    padding: 0 15px;
    border-radius: 9px;
    border: 1px solid #d7e7ed;
    background: #fff;
    color: #47677d;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

#mediq-dashboard .mq-assets-btn:hover {
    border-color: rgba(8,185,176,.45);
    color: #078d87;
    background: #f3fbfa;
}

#mediq-dashboard .mq-assets-btn.primary {
    border-color: transparent;
    background: linear-gradient(90deg,#08aaa4,#0bc1b8);
    color: #fff;
}

#mediq-dashboard .mq-assets-table-wrap {
    margin-top: 14px;
    border: 1px solid #dce9ef;
    border-radius: 13px;
    overflow: hidden;
    background: #fff;
}

#mediq-dashboard .mq-assets-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    direction: rtl;
}

#mediq-dashboard .mq-assets-table th {
    padding: 13px 15px;
    border-bottom: 1px solid #dce9ef;
    background: #f3f8fa;
    color: #47677d;
    text-align: right;
    font-size: 12px;
    font-weight: 900;
}

#mediq-dashboard .mq-assets-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #edf3f6;
    color: #294e68;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

#mediq-dashboard .mq-assets-table tbody tr:last-child td {
    border-bottom: 0;
}

#mediq-dashboard .mq-assets-table tbody tr:hover td {
    background: #f7fbfc;
}

#mediq-dashboard .mq-assets-row-number {
    width: 64px;
    color: #8aa0af !important;
    text-align: center !important;
}

#mediq-dashboard .mq-assets-empty,
#mediq-dashboard .mq-assets-loading {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #71899b;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    background: #f9fcfd;
}

#mediq-dashboard .mq-assets-empty strong {
    display: block;
    margin-bottom: 5px;
    color: #173b59;
    font-size: 13px;
}

@media(max-width:800px) {
    #mediq-dashboard .mq-assets-table-wrap { overflow-x: auto; }
    #mediq-dashboard .mq-assets-table { min-width: 620px; }
}

</style>



<div class="mq-app">


    <!-- =====================================================
         MAIN
         ===================================================== -->

    <main class="mq-main">


        <!-- HEADER -->

        <header class="mq-header">

            <div class="mq-header-right">

                <div
                    id="mqPageTitle"
                    class="mq-page-title"
                >
                    تأمین
                </div>

                <div
                    id="mqPageDesc"
                    class="mq-page-description"
                >
                    مدیریت فرآیند تأمین تجهیزات پزشکی
                </div>

            </div>


            <div class="mq-header-left">
                <div class="mq-header-welcome">
                    <span class="mq-welcome-dot"></span>
                    <strong id="mqWelcomeUser">کاربر مدیکیو</strong>
                    <span>خوش آمدید</span>
                </div>
            </div>

        </header>



        <!-- HERO -->

        <section class="mq-hero">

            <div>

                <div
                    id="mqHeroTitle"
                    class="mq-hero-title"
                >
                    مدیریت تجهیزات
                </div>

                <div
                    id="mqHeroDesc"
                    class="mq-hero-desc"
                >
                    بخش موردنظر خود را انتخاب کنید.
                </div>

            </div>


            <button
                id="mqBack"
                class="mq-back-btn"
                type="button"
            >
                بازگشت
            </button>

        </section>



        <!-- BREADCRUMB -->

        <div
            id="mqBreadcrumb"
            class="mq-breadcrumb"
        ></div>



        <!-- DYNAMIC VIEW -->

        <div
            id="mqView"
            class="mq-view"
        ></div>


    </main>



    <!-- =====================================================
         SIDEBAR
         ===================================================== -->

    <aside class="mq-sidebar">


        <div class="mq-logo">

            <img
                src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png"
                alt="MediQ"
            >

        </div>


        <div class="mq-life-title">
            چرخه عمر تجهیزات
        </div>


        <div class="mq-life">


            <div
                class="mq-life-item active"
                data-cycle="supply"
            >

                <div class="mq-life-icon">

                    <svg viewBox="0 0 24 24">

                        <path d="M4 7h16"></path>
                        <path d="M6 7l1 13h10l1-13"></path>
                        <path d="M9 4h6"></path>

                    </svg>

                </div>

                تأمین

            </div>



            <div
                class="mq-life-item"
                data-cycle="operation"
            >

                <div class="mq-life-icon">

                    <svg viewBox="0 0 24 24">

                        <circle
                            cx="12"
                            cy="12"
                            r="3"
                        ></circle>

                        <path d="M12 3v3"></path>
                        <path d="M12 18v3"></path>
                        <path d="M3 12h3"></path>
                        <path d="M18 12h3"></path>

                    </svg>

                </div>

                بهره‌برداری

            </div>



            <div
                class="mq-life-item"
                data-cycle="replacement"
            >

                <div class="mq-life-icon">

                    <svg viewBox="0 0 24 24">

                        <path d="M4 7h11"></path>
                        <path d="M12 4l3 3-3 3"></path>

                        <path d="M20 17H9"></path>
                        <path d="M12 14l-3 3 3 3"></path>

                    </svg>

                </div>

                جایگزینی

            </div>



            <div
                class="mq-life-item"
                data-cycle="maintenance"
            >

                <div class="mq-life-icon">

                    <svg viewBox="0 0 24 24">

                        <path
                            d="M14 6a4 4 0 0 0 4 4l-8 8-4-4 8-8z"
                        ></path>

                    </svg>

                </div>

                نگهداری

            </div>


        </div>




        <!-- MEDIQ NAVIGATION TREE -->
        <div class="mq-tree-title">ساختار تأمین</div>

        <div class="mq-tree" id="mqTree">

            <div class="mq-tree-row level-1 active" data-tree-action="equipment" data-tree-key="equipment">
                <span class="mq-tree-dot"></span>
                <span>مدیریت تجهیزات</span>
                <span class="mq-tree-arrow">‹</span>
            </div>

            <div class="mq-tree-children open" data-tree-group="equipment">

                <div class="mq-tree-row level-2" data-tree-action="property" data-tree-key="property">
                    <span class="mq-tree-dot"></span>
                    <span>مدیریت اموال</span>
                </div>

                <div class="mq-tree-row level-2" data-tree-action="equipmentMaintenance" data-tree-key="equipmentMaintenance">
                    <span class="mq-tree-dot"></span>
                    <span>مدیریت نگهداری و تعمیر</span>
                </div>

                <div class="mq-tree-row level-2" data-tree-action="finance" data-tree-key="finance">
                    <span class="mq-tree-dot"></span>
                    <span>مدیریت مالی و بهره‌وری</span>
                </div>

                <div class="mq-tree-row level-2" data-tree-action="logistics" data-tree-key="logistics">
                    <span class="mq-tree-dot"></span>
                    <span>مدیریت تأمین و لجستیک</span>
                    <span class="mq-tree-arrow">‹</span>
                </div>

                <div class="mq-tree-children" data-tree-group="logistics">

                    <div class="mq-tree-row level-3" data-tree-action="purchase" data-tree-key="purchase">
                        <span class="mq-tree-dot"></span>
                        <span>خرید دارایی</span>
                    </div>

                    <div class="mq-tree-row level-3" data-tree-action="newAsset" data-tree-key="newAsset">
                        <span class="mq-tree-dot"></span>
                        <span>ورود دارایی جدید</span>
                        <span class="mq-tree-arrow">‹</span>
                    </div>

                    <div class="mq-tree-children" data-tree-group="newAsset">
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="purchased" data-tree-key="newAsset-purchased"><span class="mq-tree-dot"></span><span>لیست دارایی‌های خریداری شده</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="technical" data-tree-key="newAsset-technical"><span class="mq-tree-dot"></span><span>شناسنامه فنی</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="financial" data-tree-key="newAsset-financial"><span class="mq-tree-dot"></span><span>شناسنامه مالی</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="maintenance" data-tree-key="newAsset-maintenance"><span class="mq-tree-dot"></span><span>شناسنامه نگهداری و تعمیر</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="commercial" data-tree-key="newAsset-commercial"><span class="mq-tree-dot"></span><span>شناسنامه بازرگانی</span></div>
                    </div>

                    <div class="mq-tree-row level-3" data-tree-action="editAsset" data-tree-key="editAsset">
                        <span class="mq-tree-dot"></span>
                        <span>ویرایش دارایی</span>
                        <span class="mq-tree-arrow">‹</span>
                    </div>

                    <div class="mq-tree-children" data-tree-group="editAsset">
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="purchased" data-tree-key="editAsset-purchased"><span class="mq-tree-dot"></span><span>لیست دارایی‌های خریداری شده</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="technical" data-tree-key="editAsset-technical"><span class="mq-tree-dot"></span><span>شناسنامه فنی</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="financial" data-tree-key="editAsset-financial"><span class="mq-tree-dot"></span><span>شناسنامه مالی</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="maintenance" data-tree-key="editAsset-maintenance"><span class="mq-tree-dot"></span><span>شناسنامه نگهداری و تعمیر</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="commercial" data-tree-key="editAsset-commercial"><span class="mq-tree-dot"></span><span>شناسنامه بازرگانی</span></div>
                    </div>

                    <div class="mq-tree-row level-3" data-tree-action="consumable" data-tree-key="consumable">
                        <span class="mq-tree-dot"></span>
                        <span>کالاهای مصرفی</span>
                    </div>

                </div>
            </div>

            <div class="mq-tree-separator"></div>

            <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="operation" data-tree-key="operation">
                <span class="mq-tree-dot"></span><span>بهره‌برداری</span>
            </div>

            <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="replacement" data-tree-key="replacement">
                <span class="mq-tree-dot"></span><span>جایگزینی</span>
            </div>

            <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="maintenance" data-tree-key="maintenanceCycle">
                <span class="mq-tree-dot"></span><span>نگهداری</span>
            </div>

        </div>


        <div class="mq-sidebar-bottom">

            <div
                id="mqLogout"
                class="mq-logout"
            >
                خروج از حساب کاربری
            </div>

        </div>


    </aside>


</div>




<!-- MEDIQ CONFIFORMS MODAL -->
<div id="mqCfModal" aria-hidden="true">
    <div id="mqCfDialog" role="dialog" aria-modal="true" aria-labelledby="mqCfTitle">
        <div id="mqCfHeader">
            <strong id="mqCfTitle">ثبت دارایی جدید</strong>
            <button id="mqCfClose" type="button" aria-label="بستن">×</button>
        </div>
        <div id="mqCfBody"></div>
    </div>
</div>

<div
    id="mqToast"
    class="mq-toast"
></div>



<script>

(function () {

"use strict";


/* ============================================================
   STATE
   ============================================================ */

var state = {

    cycle:
        "supply",

    screen:
        "equipment",

    selectedAssetSection:
        "purchased"

};



/* ============================================================
   ELEMENTS
   ============================================================ */

var view =
    document.getElementById(
        "mqView"
    );


var breadcrumb =
    document.getElementById(
        "mqBreadcrumb"
    );


var heroTitle =
    document.getElementById(
        "mqHeroTitle"
    );


var heroDesc =
    document.getElementById(
        "mqHeroDesc"
    );


var backButton =
    document.getElementById(
        "mqBack"
    );


var pageTitle =
    document.getElementById(
        "mqPageTitle"
    );


var pageDesc =
    document.getElementById(
        "mqPageDesc"
    );


var toast =
    document.getElementById(
        "mqToast"
    );



/* ============================================================
   ICONS
   ============================================================ */

var ICONS = {

    property:
        '<path d="M12 3l7 4-7 4-7-4 7-4z"></path>' +
        '<path d="M5 7v9l7 4 7-4V7"></path>' +
        '<path d="M12 11v9"></path>',


    maintenance:
        '<circle cx="12" cy="12" r="3"></circle>' +
        '<path d="M12 2v3"></path>' +
        '<path d="M12 19v3"></path>' +
        '<path d="M2 12h3"></path>' +
        '<path d="M19 12h3"></path>',


    finance:
        '<circle cx="12" cy="12" r="9"></circle>' +
        '<path d="M8 12h8"></path>' +
        '<path d="M12 8v8"></path>',


    supply:
        '<path d="M4 7h16"></path>' +
        '<path d="M6 7l1 13h10l1-13"></path>' +
        '<path d="M9 4h6"></path>',


    purchase:
        '<path d="M4 5h2l2 11h9l2-7H8"></path>' +
        '<circle cx="10" cy="20" r="1"></circle>' +
        '<circle cx="17" cy="20" r="1"></circle>',


    newAsset:
        '<path d="M12 3l7 4-7 4-7-4 7-4z"></path>' +
        '<path d="M5 7v9l7 4 7-4V7"></path>' +
        '<path d="M18 3v6"></path>' +
        '<path d="M15 6h6"></path>',


    edit:
        '<path d="M4 20h4l11-11-4-4L4 16v4z"></path>' +
        '<path d="M13 7l4 4"></path>',


    consumable:
        '<rect x="5" y="4" width="14" height="16" rx="2"></rect>' +
        '<path d="M8 9h8"></path>' +
        '<path d="M8 13h8"></path>'

};



/* ============================================================
   TOAST
   ============================================================ */

var toastTimer = null;


function showToast(message) {

    if (!toast) {
        return;
    }


    toast.textContent =
        message;


    toast.classList.add(
        "show"
    );


    window.clearTimeout(
        toastTimer
    );


    toastTimer =
        window.setTimeout(
            function () {

                toast.classList.remove(
                    "show"
                );

            },
            2200
        );

}



/* ============================================================
   BREADCRUMB
   ============================================================ */

function buildBreadcrumb(items) {

    if (!breadcrumb) {
        return;
    }

    var html = "";

    items.forEach(function (item, index) {

        var isLast = index === items.length - 1;

        html +=
            '<span class="' +
            (isLast ? 'mq-bread-item mq-bread-current' : 'mq-bread-item mq-bread-link') +
            '" data-bread-label="' + item + '">' +
            item +
            '</span>';

        if (!isLast) {
            html += '<span class="mq-bread-separator">/</span>';
        }
    });

    breadcrumb.innerHTML = html;

    var links = breadcrumb.querySelectorAll('.mq-bread-link');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            var label = this.getAttribute('data-bread-label');

            if (label === 'تأمین' || label === 'مدیریت تجهیزات') {
                renderEquipment();
            }
            else if (label === 'مدیریت تأمین و لجستیک') {
                renderLogistics();
            }
            else if (label === 'ورود دارایی جدید') {
                state.selectedAssetSection = 'purchased';
                renderAssetSections('newAsset');
            }
            else if (label === 'ویرایش دارایی') {
                state.selectedAssetSection = 'purchased';
                renderAssetSections('editAsset');
            }
        };
    }

}


/* ============================================================
   CARD
   ============================================================ */

function moduleCard(
    title,
    icon,
    action,
    clickable
) {

    return (

        '<div class="mq-module-card" ' +

            (
                clickable
                    ? 'data-action="' +
                      action +
                      '"'
                    : ''
            ) +

        '>' +

            '<div class="mq-module-icon">' +

                '<svg viewBox="0 0 24 24">' +

                    icon +

                '</svg>' +

            '</div>' +

            '<div class="mq-module-name">' +
                title +
            '</div>' +

            (
                clickable
                    ? '<div class="mq-module-arrow">‹</div>'
                    : ''
            ) +

        '</div>'

    );

}



/* ============================================================
   SCREEN : EQUIPMENT
   ============================================================ */

function renderEquipment() {

    state.screen =
        "equipment";


    pageTitle.textContent =
        "تأمین";


    pageDesc.textContent =
        "مدیریت فرآیند تأمین تجهیزات پزشکی";


    heroTitle.textContent =
        "مدیریت تجهیزات";


    heroDesc.textContent =
        "حوزه موردنظر را انتخاب کنید.";


    backButton.style.display =
        "none";


    buildBreadcrumb(
        [
            "تأمین",
            "مدیریت تجهیزات"
        ]
    );


    view.innerHTML =

        '<div class="mq-section-head">' +

            '<div>' +

                '<div class="mq-section-title">' +
                    'مدیریت تجهیزات' +
                '</div>' +

                '<div class="mq-section-desc">' +
                    'یکی از حوزه‌های مدیریت تجهیزات را انتخاب کنید.' +
                '</div>' +

            '</div>' +

        '</div>' +


        '<div class="mq-card-grid">' +


            moduleCard(
                "مدیریت اموال",
                ICONS.property,
                "",
                false
            ) +


            moduleCard(
                "مدیریت نگهداری و تعمیر",
                ICONS.maintenance,
                "",
                false
            ) +


            moduleCard(
                "مدیریت مالی و بهره‌وری",
                ICONS.finance,
                "",
                false
            ) +


            moduleCard(
                "مدیریت تأمین و لجستیک",
                ICONS.supply,
                "logistics",
                true
            ) +


        '</div>';


    bindActions();
    mqTreeActivate("equipment");

}



/* ============================================================
   SCREEN : LOGISTICS
   ============================================================ */

function renderLogistics() {

    state.screen =
        "logistics";


    heroTitle.textContent =
        "مدیریت تأمین و لجستیک";


    heroDesc.textContent =
        "عملیات موردنظر را انتخاب کنید.";


    backButton.style.display =
        "inline-block";


    buildBreadcrumb(
        [
            "تأمین",
            "مدیریت تجهیزات",
            "مدیریت تأمین و لجستیک"
        ]
    );


    view.innerHTML =

        '<div class="mq-section-head">' +

            '<div>' +

                '<div class="mq-section-title">' +
                    'مدیریت تأمین و لجستیک' +
                '</div>' +

                '<div class="mq-section-desc">' +
                    'عملیات مرتبط با تأمین و لجستیک تجهیزات' +
                '</div>' +

            '</div>' +

        '</div>' +


        '<div class="mq-action-grid">' +


            actionCard(
                "خرید دارایی",
                "فرآیند خرید دارایی",
                ICONS.purchase,
                "purchase"
            ) +


            actionCard(
                "ورود دارایی جدید",
                "ثبت و تکمیل اطلاعات دارایی جدید",
                ICONS.newAsset,
                "newAsset"
            ) +


            actionCard(
                "ویرایش دارایی",
                "مشاهده و ویرایش اطلاعات دارایی موجود",
                ICONS.edit,
                "editAsset"
            ) +


            actionCard(
                "کالاهای مصرفی",
                "مدیریت کالاهای مصرفی",
                ICONS.consumable,
                "consumable"
            ) +


        '</div>';


    bindActions();
    mqTreeActivate("logistics");

}



function actionCard(
    title,
    subtitle,
    icon,
    action
) {

    return (

        '<div class="mq-action-card" data-action="' +
            action +
        '">' +

            '<div class="mq-action-icon">' +

                '<svg viewBox="0 0 24 24">' +

                    icon +

                '</svg>' +

            '</div>' +

            '<div>' +

                '<div class="mq-action-title">' +
                    title +
                '</div>' +

                '<div class="mq-action-sub">' +
                    subtitle +
                '</div>' +

            '</div>' +

        '</div>'

    );

}



/* ============================================================
   ASSET SECTION SCREEN
   ============================================================ */

function renderAssetSections(mode) {

    state.screen =
        mode;


    var isNew =
        mode ===
        "newAsset";


    var title =
        isNew
            ? "ورود دارایی جدید"
            : "ویرایش دارایی موجود";


    heroTitle.textContent =
        title;


    heroDesc.textContent =
        isNew
            ? "اطلاعات موردنیاز برای ورود دارایی را انتخاب کنید."
            : "بخش موردنظر برای ویرایش دارایی را انتخاب کنید.";


    backButton.style.display =
        "inline-block";


    buildBreadcrumb(
        [
            "تأمین",
            "مدیریت تجهیزات",
            "مدیریت تأمین و لجستیک",
            title
        ]
    );


    view.innerHTML =

        '<div class="mq-list-layout">' +


            '<div class="mq-list-menu">' +


                listOption(
                    "purchased",
                    "لیست دارایی‌های خریداری شده"
                ) +


                listOption(
                    "technical",
                    "شناسنامه فنی"
                ) +


                listOption(
                    "financial",
                    "شناسنامه مالی"
                ) +


                listOption(
                    "maintenance",
                    "شناسنامه نگهداری و تعمیر"
                ) +


                listOption(
                    "commercial",
                    "شناسنامه بازرگانی"
                ) +


            '</div>' +


            '<div class="mq-preview">' +

                '<div id="mqPreviewContent"></div>' +

            '</div>' +


        '</div>';


    bindSectionOptions();


    renderPreview(
        state.selectedAssetSection
    );

    mqTreeActivate(mode + "-" + state.selectedAssetSection);

}



function listOption(
    key,
    title
) {

    return (

        '<div ' +
            'class="mq-list-option" ' +
            'data-section="' +
            key +
            '">' +

            '<span>' +
                title +
            '</span>' +

            '<span class="mq-option-badge">' +
                '‹' +
            '</span>' +

        '</div>'

    );

}



/* ============================================================
   PREVIEW CONTENT
   ============================================================ */

var SECTION_NAMES = {

    purchased:
        "لیست دارایی‌های خریداری شده",

    technical:
        "شناسنامه فنی",

    financial:
        "شناسنامه مالی",

    maintenance:
        "شناسنامه نگهداری و تعمیر",

    commercial:
        "شناسنامه بازرگانی"

};



function mqNormalizeText(value) {
    return (value || "")
        .replace(/\u00a0/g, " ")
        .replace(/\s+/g, " ")
        .trim();
}

function mqFindPurchasedAssetsSourceTable() {
    var tables = document.querySelectorAll("table");
    var bestTable = null;
    var bestScore = -1;

    for (var i = 0; i < tables.length; i++) {
        var table = tables[i];

        if (table.closest("#mediq-dashboard") ||
            table.closest("#mqCfModal") ||
            table.closest("form.aui-confiforms") ||
            table.closest(".confiFormsFormBorder")) {
            continue;
        }

        var rows = table.querySelectorAll("tr");
        var dataRows = 0;

        for (var r = 0; r < rows.length; r++) {
            if (rows[r].querySelectorAll("td").length >= 2) {
                dataRows++;
            }
        }

        if (!dataRows) {
            continue;
        }

        var signature = (
            (table.id || "") + " " +
            (table.className || "") + " " +
            (table.parentElement ? (table.parentElement.id || "") + " " + (table.parentElement.className || "") : "")
        ).toLowerCase();

        var score = dataRows * 10;

        if (signature.indexOf("confiform") !== -1 || signature.indexOf("cf_") !== -1) {
            score += 100;
        }

        var headerText = mqNormalizeText(
            Array.prototype.map.call(
                table.querySelectorAll("th"),
                function (th) { return th.textContent; }
            ).join(" ")
        );

        if (headerText.indexOf("شناسه دستگاه") !== -1 || headerText.indexOf("نام دستگاه") !== -1) {
            score += 200;
        }

        if (score > bestScore) {
            bestScore = score;
            bestTable = table;
        }
    }

    return bestTable;
}

function mqReadPurchasedAssets() {
    var table = mqFindPurchasedAssetsSourceTable();

    if (!table) {
        return null;
    }

    var headers = Array.prototype.map.call(
        table.querySelectorAll("thead th, tr:first-child th"),
        function (th) { return mqNormalizeText(th.textContent); }
    );

    var idIndex = -1;
    var nameIndex = -1;

    for (var h = 0; h < headers.length; h++) {
        if (headers[h].indexOf("شناسه") !== -1) {
            idIndex = h;
        }
        if (headers[h].indexOf("نام دستگاه") !== -1 || headers[h] === "نام") {
            nameIndex = h;
        }
    }

    var rows = [];
    var trList = table.querySelectorAll("tbody tr");

    if (!trList.length) {
        trList = table.querySelectorAll("tr");
    }

    for (var i = 0; i < trList.length; i++) {
        var cells = trList[i].querySelectorAll("td");
        if (cells.length < 2) {
            continue;
        }

        var values = Array.prototype.map.call(
            cells,
            function (td) { return mqNormalizeText(td.textContent); }
        );

        if (!values.join("").trim()) {
            continue;
        }

        var resolvedIdIndex = idIndex;
        var resolvedNameIndex = nameIndex;

        if (resolvedIdIndex < 0 || resolvedNameIndex < 0) {
            /* ConfiForms TableView currently contains only deviceId + deviceName.
               Prefer an ID-looking value for deviceId, otherwise preserve column order. */
            var firstLooksLikeId = /^[A-Za-z0-9._\-/]+$/.test(values[0]) && values[0].indexOf(" ") === -1;
            var secondLooksLikeId = /^[A-Za-z0-9._\-/]+$/.test(values[1]) && values[1].indexOf(" ") === -1;

            if (firstLooksLikeId && !secondLooksLikeId) {
                resolvedIdIndex = 0;
                resolvedNameIndex = 1;
            } else if (secondLooksLikeId && !firstLooksLikeId) {
                resolvedIdIndex = 1;
                resolvedNameIndex = 0;
            } else {
                resolvedIdIndex = 0;
                resolvedNameIndex = 1;
            }
        }

        var deviceId = values[resolvedIdIndex] || "—";
        var deviceName = values[resolvedNameIndex] || "—";

        if (deviceId === "—" && deviceName === "—") {
            continue;
        }

        rows.push({
            deviceId: deviceId,
            deviceName: deviceName
        });
    }

    return rows;
}

function mqEscapeHtml(value) {
    return String(value == null ? "" : value)
        .replace(/&/g, "&")
        .replace(/</g, "<")
        .replace(/>/g, ">")
        .replace(/"/g, """)
        .replace(/'/g, "'");
}

function mqPopulatePurchasedAssets(attempt) {
    var host = document.getElementById("mqAssetsTableHost");
    var count = document.getElementById("mqAssetsCount");

    if (!host) {
        return;
    }

    var records = mqReadPurchasedAssets();

    if (records === null) {
        if ((attempt || 0) < 12) {
            window.setTimeout(function () {
                mqPopulatePurchasedAssets((attempt || 0) + 1);
            }, 250);
            return;
        }

        host.innerHTML =
            '<div class="mq-assets-empty">' +
                '<div><strong>لیست دارایی‌ها پیدا نشد</strong>' +
                'TableView فرم mediqNewAsset روی صفحه وجود دارد، اما خروجی آن هنوز در DOM قابل خواندن نیست.' +
                '</div>' +
            '</div>';

        if (count) count.textContent = "";
        return;
    }

    if (count) {
        count.textContent = records.length + " دارایی";
    }

    if (!records.length) {
        host.innerHTML =
            '<div class="mq-assets-empty">' +
                '<div><strong>هنوز دارایی ثبت نشده است</strong>' +
                'برای ثبت اولین دارایی از دکمه «ثبت دارایی جدید» استفاده کنید.' +
                '</div>' +
            '</div>';
        return;
    }

    var html =
        '<div class="mq-assets-table-wrap">' +
            '<table class="mq-assets-table">' +
                '<thead>' +
                    '<tr>' +
                        '<th class="mq-assets-row-number">ردیف</th>' +
                        '<th>شناسه دستگاه</th>' +
                        '<th>نام دستگاه</th>' +
                    '</tr>' +
                '</thead>' +
                '<tbody>';

    for (var i = 0; i < records.length; i++) {
        html +=
            '<tr>' +
                '<td class="mq-assets-row-number">' + (i + 1) + '</td>' +
                '<td>' + mqEscapeHtml(records[i].deviceId) + '</td>' +
                '<td>' + mqEscapeHtml(records[i].deviceName) + '</td>' +
            '</tr>';
    }

    html +=
                '</tbody>' +
            '</table>' +
        '</div>';

    host.innerHTML = html;
}

function mqRenderPurchasedAssets(container) {
    container.innerHTML =
        '<div class="mq-preview-title">لیست دارایی‌های خریداری شده</div>' +
        '<div class="mq-preview-description">دارایی‌های ثبت‌شده در مدیکیو</div>' +
        '<div class="mq-assets-toolbar">' +
            '<div id="mqAssetsCount" class="mq-assets-count"></div>' +
            '<div class="mq-assets-toolbar-actions">' +
                '<button class="mq-assets-btn" type="button" id="mqAssetsRefresh">به‌روزرسانی لیست</button>' +
                '<button class="mq-assets-btn primary" type="button" id="mqAssetsNew">ثبت دارایی جدید</button>' +
            '</div>' +
        '</div>' +
        '<div id="mqAssetsTableHost" class="mq-assets-loading">در حال بارگذاری دارایی‌ها...</div>';

    var newButton = document.getElementById("mqAssetsNew");
    if (newButton) {
        newButton.onclick = openMediQAssetForm;
    }

    var refreshButton = document.getElementById("mqAssetsRefresh");
    if (refreshButton) {
        refreshButton.onclick = function () {
            /* Reload is intentional: ConfiForms TableView is server-rendered. */
            window.location.reload();
        };
    }

    mqPopulatePurchasedAssets(0);
}

function renderPreview(section) {

    state.selectedAssetSection =
        section;

    if (state.screen === "newAsset" || state.screen === "editAsset") {
        mqTreeActivate(state.screen + "-" + section);
    }

    var container =
        document.getElementById(
            "mqPreviewContent"
        );

    if (!container) {
        return;
    }

    var title =
        SECTION_NAMES[section];

    if (section === "purchased") {
        mqRenderPurchasedAssets(container);
    }
    else {
        container.innerHTML =
            '<div class="mq-preview-title">' +
                title +
            '</div>' +

            '<div class="mq-preview-description">' +
                (
                    state.screen === "newAsset"
                        ? "اطلاعات این بخش را برای دارایی انتخاب‌شده تکمیل کنید."
                        : "اطلاعات این بخش را برای دارایی انتخاب‌شده مشاهده یا ویرایش کنید."
                ) +
            '</div>' +

            '<div class="mq-demo-box">' +
                '<div class="mq-demo-icon">✓</div>' +
                '<div class="mq-demo-text">' +
                    title +
                '</div>' +
                '<button class="mq-demo-button" type="button" id="mqDemoButton">' +
                    (state.screen === "newAsset" ? "ثبت اطلاعات" : "مشاهده اطلاعات") +
                '</button>' +
            '</div>';
    }

    var options =
        document.querySelectorAll(
            "#mediq-dashboard .mq-list-option"
        );

    for (var i = 0; i < options.length; i++) {
        options[i].classList.toggle(
            "active",
            options[i].getAttribute(
                "data-section"
            ) === section
        );
    }

    var demoButton =
        document.getElementById(
            "mqDemoButton"
        );

    if (demoButton) {
        demoButton.onclick = function () {
            showToast("فرم این بخش هنوز تعریف نشده است.");
        };
    }
}



/* ============================================================
   MEDIQ <-> CONFIFORMS : NEW ASSET FORM
   ============================================================ */

var mqCfOriginalParent = null;
var mqCfOriginalNext = null;

function findMediQAssetFormPanel() {
    var form = document.querySelector(
        'form.aui-confiforms input[name="registrationFormName"][value="mediqNewAsset"]'
    );

    if (!form) return null;

    var panel = form.closest(".confiFormsFormBorder");
    return panel || form.parentElement;
}

function openMediQAssetForm() {
    var panel = findMediQAssetFormPanel();
    var modal = document.getElementById("mqCfModal");
    var body = document.getElementById("mqCfBody");

    if (!panel || !modal || !body) {
        showToast("فرم mediqNewAsset روی این صفحه پیدا نشد.");
        return;
    }

    if (!mqCfOriginalParent) {
        mqCfOriginalParent = panel.parentNode;
        mqCfOriginalNext = panel.nextSibling;
    }

    body.appendChild(panel);

    panel.style.display = "block";
    panel.style.position = "static";
    panel.style.left = "auto";
    panel.style.top = "auto";
    panel.style.width = "100%";
    panel.style.height = "auto";
    panel.style.opacity = "1";
    panel.style.overflow = "visible";
    panel.style.pointerEvents = "auto";

    modal.classList.add("open");
    modal.setAttribute("aria-hidden", "false");

    window.setTimeout(function () {
        var first = panel.querySelector(
            'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])'
        );
        if (first) first.focus();
    }, 60);
}

function closeMediQAssetForm() {
    var modal = document.getElementById("mqCfModal");
    var panel = findMediQAssetFormPanel();

    if (panel && mqCfOriginalParent) {
        if (mqCfOriginalNext && mqCfOriginalNext.parentNode === mqCfOriginalParent) {
            mqCfOriginalParent.insertBefore(panel, mqCfOriginalNext);
        } else {
            mqCfOriginalParent.appendChild(panel);
        }
    }

    if (modal) {
        modal.classList.remove("open");
        modal.setAttribute("aria-hidden", "true");
    }
}

(function bindMediQAssetModal() {
    var modal = document.getElementById("mqCfModal");
    var close = document.getElementById("mqCfClose");

    if (close) {
        close.onclick = closeMediQAssetForm;
    }

    if (modal) {
        modal.onclick = function (e) {
            if (e.target === modal) {
                closeMediQAssetForm();
            }
        };
    }

    document.addEventListener("keydown", function (e) {
        if (e.key === "Escape" && modal && modal.classList.contains("open")) {
            closeMediQAssetForm();
        }
    });
})();


/* ============================================================
   SIMPLE PRESENTATION PAGES
   ============================================================ */

function renderSimplePage(
    title
) {

    heroTitle.textContent =
        title;


    heroDesc.textContent =
        "نمای پرزنت این بخش";


    backButton.style.display =
        "inline-block";


    buildBreadcrumb(
        [
            "تأمین",
            "مدیریت تجهیزات",
            "مدیریت تأمین و لجستیک",
            title
        ]
    );


    view.innerHTML =

        '<div class="mq-empty-cycle">' +

            '<strong>' +
                title +
            '</strong>' +

            '<span>' +
                'این بخش در ادامه فرآیند طراحی تکمیل می‌شود.' +
            '</span>' +

        '</div>';

}



/* ============================================================
   OTHER LIFE CYCLE TABS
   ============================================================ */

function renderOtherCycle(
    key,
    title
) {

    state.cycle =
        key;


    pageTitle.textContent =
        title;


    pageDesc.textContent =
        "چرخه عمر تجهیزات پزشکی";


    heroTitle.textContent =
        title;


    heroDesc.textContent =
        "نمای ساختار این بخش";


    backButton.style.display =
        "none";


    buildBreadcrumb(
        [
            title
        ]
    );


    view.innerHTML =

        '<div class="mq-empty-cycle">' +

            '<strong>' +
                title +
            '</strong>' +

            '<span>' +
                'ساختار این بخش در مرحله بعد طراحی می‌شود.' +
            '</span>' +

        '</div>';

}



/* ============================================================
   BIND MODULE ACTIONS
   ============================================================ */

function bindActions() {

    var elements =
        document.querySelectorAll(
            "#mediq-dashboard [data-action]"
        );


    for (
        var i = 0;
        i < elements.length;
        i++
    ) {

        elements[i].onclick =
            function () {

                var action =
                    this.getAttribute(
                        "data-action"
                    );


                if (
                    action ===
                    "logistics"
                ) {

                    renderLogistics();

                }


                else if (
                    action ===
                    "newAsset"
                ) {

                    renderAssetSections(
                        "newAsset"
                    );

                }


                else if (
                    action ===
                    "editAsset"
                ) {

                    renderAssetSections(
                        "editAsset"
                    );

                }


                else if (
                    action ===
                    "purchase"
                ) {

                    renderSimplePage(
                        "خرید دارایی"
                    );

                }


                else if (
                    action ===
                    "consumable"
                ) {

                    renderSimplePage(
                        "کالاهای مصرفی"
                    );

                }

            };

    }

}



/* ============================================================
   SECTION OPTIONS
   ============================================================ */

function bindSectionOptions() {

    var options =
        document.querySelectorAll(
            "#mediq-dashboard .mq-list-option"
        );


    for (
        var i = 0;
        i < options.length;
        i++
    ) {

        options[i].onclick =
            function () {

                renderPreview(
                    this.getAttribute(
                        "data-section"
                    )
                );

            };

    }

}



/* ============================================================
   BACK
   ============================================================ */

if (backButton) {

    backButton.onclick =
        function () {


            if (
                state.screen ===
                "logistics"
            ) {

                renderEquipment();

            }


            else if (
                state.screen ===
                "newAsset" ||
                state.screen ===
                "editAsset"
            ) {

                renderLogistics();

            }


            else if (
                state.screen === "property" ||
                state.screen === "equipmentMaintenance" ||
                state.screen === "finance"
            ) {

                renderEquipment();

            }

            else if (
                state.screen === "purchase" ||
                state.screen === "consumable"
            ) {

                renderLogistics();

            }

            else {

                renderLogistics();

            }

        };

}



/* ============================================================
   LIFE CYCLE BUTTONS
   ============================================================ */

var lifeItems =
    document.querySelectorAll(
        "#mediq-dashboard .mq-life-item"
    );


for (
    var i = 0;
    i < lifeItems.length;
    i++
) {

    lifeItems[i].onclick =
        function () {

            var cycle =
                this.getAttribute(
                    "data-cycle"
                );


            for (
                var x = 0;
                x < lifeItems.length;
                x++
            ) {

                lifeItems[x]
                    .classList
                    .remove(
                        "active"
                    );

            }


            this.classList.add(
                "active"
            );


            if (
                cycle ===
                "supply"
            ) {

                state.cycle =
                    "supply";


                renderEquipment();

            }


            else if (
                cycle ===
                "operation"
            ) {

                renderOtherCycle(
                    "operation",
                    "بهره‌برداری"
                );

            }


            else if (
                cycle ===
                "replacement"
            ) {

                renderOtherCycle(
                    "replacement",
                    "جایگزینی"
                );

            }


            else if (
                cycle ===
                "maintenance"
            ) {

                renderOtherCycle(
                    "maintenance",
                    "نگهداری"
                );

            }

        };

}



/* ============================================================
   LOGOUT
   ============================================================ */

var logout =
    document.getElementById(
        "mqLogout"
    );


if (logout) {

    logout.onclick =
        function () {

            window.location.href =
                "/logout.action";

        };

}



/* ============================================================
   CURRENT USER / FULL NAME
   ============================================================ */

(function loadMediQCurrentUser() {

    var fallbackUser = "";

    try {
        if (window.AJS && AJS.Meta) {
            fallbackUser = AJS.Meta.get("remote-user") || "";
        }
    } catch (e) {}

    function setWelcomeName(name) {
        var welcomeUser = document.getElementById("mqWelcomeUser");
        if (welcomeUser && name) {
            welcomeUser.textContent = name;
        }
    }

    setWelcomeName(fallbackUser || "کاربر مدیکیو");

    try {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/rest/api/user/current", true);
        xhr.setRequestHeader("Accept", "application/json");
        xhr.onreadystatechange = function () {
            if (xhr.readyState !== 4 || xhr.status < 200 || xhr.status >= 300) return;
            try {
                var user = JSON.parse(xhr.responseText || "{}");
                setWelcomeName(user.displayName || user.fullName || fallbackUser || "کاربر مدیکیو");
            } catch (e) {}
        };
        xhr.send();
    } catch (e) {}

})();


/* ============================================================
   SIDEBAR TREE
   ============================================================ */

function mqTreeOpen(group, open) {
    var el = document.querySelector('#mediq-dashboard [data-tree-group="' + group + '"]');
    var row = document.querySelector('#mediq-dashboard [data-tree-key="' + group + '"]');
    if (el) el.classList.toggle("open", !!open);
    if (row) row.classList.toggle("open", !!open);
}

function mqTreeReset() {
    var rows = document.querySelectorAll("#mediq-dashboard .mq-tree-row");
    for (var i = 0; i < rows.length; i++) {
        rows[i].classList.remove("active");
        rows[i].classList.remove("parent-active");
    }
}

function mqTreeActivate(key) {
    mqTreeReset();

    var active = document.querySelector('#mediq-dashboard [data-tree-key="' + key + '"]');
    if (active) active.classList.add("active");

    /* Default collapse */
    mqTreeOpen("equipment", false);
    mqTreeOpen("logistics", false);
    mqTreeOpen("newAsset", false);
    mqTreeOpen("editAsset", false);

    if (key === "equipment" || key === "property" || key === "equipmentMaintenance" || key === "finance" ||
        key === "logistics" || key === "purchase" || key === "newAsset" || key === "editAsset" ||
        key === "consumable" || key.indexOf("newAsset-") === 0 || key.indexOf("editAsset-") === 0) {
        mqTreeOpen("equipment", true);
        var p1 = document.querySelector('[data-tree-key="equipment"]');
        if (p1 && key !== "equipment") p1.classList.add("parent-active");
    }

    if (key === "logistics" || key === "purchase" || key === "newAsset" || key === "editAsset" ||
        key === "consumable" || key.indexOf("newAsset-") === 0 || key.indexOf("editAsset-") === 0) {
        mqTreeOpen("logistics", true);
        var p2 = document.querySelector('[data-tree-key="logistics"]');
        if (p2 && key !== "logistics") p2.classList.add("parent-active");
    }

    if (key === "newAsset" || key.indexOf("newAsset-") === 0) {
        mqTreeOpen("newAsset", true);
        var p3 = document.querySelector('[data-tree-key="newAsset"]');
        if (p3 && key !== "newAsset") p3.classList.add("parent-active");
    }

    if (key === "editAsset" || key.indexOf("editAsset-") === 0) {
        mqTreeOpen("editAsset", true);
        var p4 = document.querySelector('[data-tree-key="editAsset"]');
        if (p4 && key !== "editAsset") p4.classList.add("parent-active");
    }
}

function mqTreeSimpleEquipmentPage(title, key) {
    state.screen = key;
    pageTitle.textContent = "تأمین";
    pageDesc.textContent = "مدیریت فرآیند تأمین تجهیزات پزشکی";
    heroTitle.textContent = title;
    heroDesc.textContent = "نمای پرزنت این بخش";
    backButton.style.display = "inline-block";
    buildBreadcrumb(["تأمین", "مدیریت تجهیزات", title]);
    view.innerHTML =
        '<div class="mq-empty-cycle">' +
            '<strong>' + title + '</strong>' +
            '<span>این بخش در ادامه فرآیند طراحی تکمیل می‌شود.</span>' +
        '</div>';
    mqTreeActivate(key);
}

function bindTree() {
    var rows = document.querySelectorAll("#mediq-dashboard .mq-tree-row[data-tree-action]");

    for (var i = 0; i < rows.length; i++) {
        rows[i].onclick = function () {
            var action = this.getAttribute("data-tree-action");

            if (action === "equipment") {
                renderEquipment();
            }
            else if (action === "property") {
                mqTreeSimpleEquipmentPage("مدیریت اموال", "property");
            }
            else if (action === "equipmentMaintenance") {
                mqTreeSimpleEquipmentPage("مدیریت نگهداری و تعمیر", "equipmentMaintenance");
            }
            else if (action === "finance") {
                mqTreeSimpleEquipmentPage("مدیریت مالی و بهره‌وری", "finance");
            }
            else if (action === "logistics") {
                renderLogistics();
            }
            else if (action === "purchase") {
                state.screen = "purchase";
                renderSimplePage("خرید دارایی");
                mqTreeActivate("purchase");
            }
            else if (action === "newAsset") {
                state.selectedAssetSection = "purchased";
                renderAssetSections("newAsset");
            }
            else if (action === "editAsset") {
                state.selectedAssetSection = "purchased";
                renderAssetSections("editAsset");
            }
            else if (action === "consumable") {
                state.screen = "consumable";
                renderSimplePage("کالاهای مصرفی");
                mqTreeActivate("consumable");
            }
            else if (action === "section") {
                var mode = this.getAttribute("data-mode");
                var section = this.getAttribute("data-section");

                if (state.screen !== mode) {
                    state.selectedAssetSection = section;
                    renderAssetSections(mode);
                } else {
                    renderPreview(section);
                }

                mqTreeActivate(mode + "-" + section);
            }
            else if (action === "cycle") {
                var cycle = this.getAttribute("data-cycle");

                if (cycle === "operation") {
                    renderOtherCycle("operation", "بهره‌برداری");
                    mqTreeActivate("operation");
                }
                else if (cycle === "replacement") {
                    renderOtherCycle("replacement", "جایگزینی");
                    mqTreeActivate("replacement");
                }
                else if (cycle === "maintenance") {
                    renderOtherCycle("maintenance", "نگهداری");
                    mqTreeActivate("maintenanceCycle");
                }
            }
        };
    }
}


/* ============================================================
   INITIAL
   ============================================================ */

bindTree();
renderEquipment();


})();

</script>

</div>