{"id":545,"date":"2026-05-18T17:35:13","date_gmt":"2026-05-18T17:35:13","guid":{"rendered":"https:\/\/midnightblue-weasel-516787.hostingersite.com\/?page_id=545"},"modified":"2026-09-20T05:58:15","modified_gmt":"2026-09-20T05:58:15","slug":"employee-request-form","status":"publish","type":"page","link":"https:\/\/aixworkspace.net\/ar\/employee-request-form\/","title":{"rendered":"Employee Request Form"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"545\" class=\"elementor elementor-545\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dbbfc5b e-con e-atomic-element e-flexbox-base e-default-div e-1bd0629 \" data-id=\"dbbfc5b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dbbfc5b\">\n    \t\t<div class=\"elementor-element elementor-element-cc822f6 elementor-widget elementor-widget-html\" data-id=\"cc822f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* ============================================================\r\n   EMPLOYEE REQUEST FORM \u2014 redesigned to match reference layout\r\n   Scoped to .erf-wrap to avoid Elementor conflicts\r\n============================================================ *\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\r\n\r\n.erf-wrap,\r\n.erf-wrap *,\r\n.erf-wrap *::before,\r\n.erf-wrap *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.erf-wrap {\r\n    --erf-primary: #0A5A9C;\r\n    --erf-primary-dark: #052B52;\r\n    --erf-blue: #0B78B8;\r\n    --erf-light-blue: #EAF3FA;\r\n    --erf-border: #DEE9F2;\r\n    --erf-text: #052B52;\r\n    --erf-muted: #64798D;\r\n    --erf-orange: #F0A22E;\r\n    --erf-teal: #19B98A;\r\n    --erf-purple: #8B5CF6;\r\n    --erf-green: #22C55E;\r\n    --erf-danger: #E05252;\r\n\r\n    width: 100%;\r\n    min-height: 100%;\r\n    padding: 48px 24px 60px;\r\n    position: relative;\r\n\r\n    background: linear-gradient(180deg, #F3F9FD 0%, #FFFFFF 55%);\r\n    font-family: 'Plus Jakarta Sans', Arial, sans-serif;\r\n    color: var(--erf-text);\r\n}\r\n\r\n\/* ============================================================\r\n   PAGE HEADER\r\n============================================================ *\/\r\n\r\n.erf-page-header {\r\n    max-width: 720px;\r\n    margin: 0 auto 40px;\r\n    text-align: center;\r\n}\r\n\r\n.erf-eyebrow {\r\n    margin: 0 0 10px;\r\n    color: var(--erf-muted);\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: .16em;\r\n}\r\n\r\n.erf-page-title {\r\n    margin: 0;\r\n    font-size: 42px;\r\n    line-height: 1.15;\r\n    font-weight: 800;\r\n    letter-spacing: -.03em;\r\n    color: var(--erf-primary-dark);\r\n}\r\n\r\n.erf-page-title span {\r\n    color: var(--erf-blue);\r\n}\r\n\r\n.erf-page-subtitle {\r\n    margin: 14px 0 0;\r\n    color: var(--erf-muted);\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n}\r\n\r\n\/* ============================================================\r\n   LAYOUT\r\n============================================================ *\/\r\n\r\n.erf-layout {\r\n    max-width: 1240px;\r\n    margin: 0 auto;\r\n\r\n    display: grid;\r\n    grid-template-columns: 250px minmax(0, 1fr) 270px;\r\n    gap: 22px;\r\n    align-items: start;\r\n}\r\n\r\n.erf-panel {\r\n    background: #FFFFFF;\r\n    border: 1px solid var(--erf-border);\r\n    border-radius: 16px;\r\n    padding: 22px;\r\n    box-shadow: 0 10px 30px rgba(5, 43, 82, .05);\r\n}\r\n\r\n.erf-panel-title {\r\n    margin: 0 0 14px;\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n    color: var(--erf-primary-dark);\r\n}\r\n\r\n\/* ============================================================\r\n   LEFT SIDEBAR \u2014 COMMON REQUESTS\r\n============================================================ *\/\r\n\r\n.erf-sidebar-left {\r\n    order: 1;\r\n    position: sticky;\r\n    top: 24px;\r\n}\r\n\r\n.erf-common-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n}\r\n\r\n.erf-common-item {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 12px;\r\n\r\n    padding: 12px;\r\n    border-radius: 12px;\r\n    border: 1px solid transparent;\r\n\r\n    cursor: pointer;\r\n    transition: background .2s ease, border-color .2s ease;\r\n}\r\n\r\n.erf-common-item:hover {\r\n    background: #F6FAFD;\r\n}\r\n\r\n.erf-common-item.active {\r\n    background: var(--erf-light-blue);\r\n    border-color: #C9E0EF;\r\n}\r\n\r\n.erf-common-icon {\r\n    width: 36px;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 10px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    background: #DDEEFA;\r\n    color: var(--erf-primary);\r\n}\r\n\r\n.erf-common-icon svg {\r\n    width: 18px;\r\n    height: 18px;\r\n}\r\n\r\n.erf-common-text strong {\r\n    display: block;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: var(--erf-primary-dark);\r\n    margin-bottom: 2px;\r\n}\r\n\r\n.erf-common-text span {\r\n    display: block;\r\n    font-size: 11.5px;\r\n    line-height: 1.4;\r\n    color: var(--erf-muted);\r\n}\r\n\r\n\/* ============================================================\r\n   MAIN FORM CARD\r\n============================================================ *\/\r\n\r\n.erf-main {\r\n    order: 2;\r\n    padding: 26px 28px 24px;\r\n    border: 4px solid #FE8826;\r\n}\r\n\r\n.erf-section {\r\n    margin-top: 22px;\r\n}\r\n\r\n.erf-section:first-child {\r\n    margin-top: 0;\r\n}\r\n\r\n.erf-section-heading {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 12px;\r\n    padding-bottom: 14px;\r\n    margin-bottom: 16px;\r\n    border-bottom: 1px solid #EEF4F9;\r\n}\r\n\r\n.erf-section-number {\r\n    width: 30px;\r\n    height: 30px;\r\n    min-width: 30px;\r\n    border-radius: 50%;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    background: var(--erf-light-blue);\r\n    color: var(--erf-primary);\r\n\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n}\r\n\r\n.erf-section-title {\r\n    margin: 0;\r\n    color: var(--erf-primary-dark);\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n}\r\n\r\n.erf-section-description {\r\n    margin: 2px 0 0;\r\n    color: var(--erf-muted);\r\n    font-size: 12px;\r\n    line-height: 1.4;\r\n}\r\n\r\n\/* ---- Request type pills ---- *\/\r\n\r\n.erf-request-types {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 12px;\r\n}\r\n\r\n.erf-request-type {\r\n    min-height: 96px;\r\n\r\n    border: 1px solid var(--erf-border);\r\n    border-radius: 12px;\r\n    background: #FFFFFF;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n\r\n    cursor: pointer;\r\n    user-select: none;\r\n    position: relative;\r\n\r\n    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;\r\n}\r\n\r\n.erf-request-type:hover {\r\n    border-color: #8FC0DC;\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.erf-request-type.active {\r\n    border: 1.5px solid var(--erf-primary);\r\n    background: var(--erf-light-blue);\r\n    box-shadow: 0 6px 16px rgba(5, 90, 156, .10);\r\n}\r\n\r\n.erf-request-icon {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.erf-request-icon svg {\r\n    width: 20px;\r\n    height: 20px;\r\n}\r\n\r\n.erf-request-type[data-value=\"Laptop\"] .erf-request-icon { background: #DDEEFA; color: #0A6EAD; }\r\n.erf-request-type[data-value=\"Loan\"] .erf-request-icon { background: #FFF1D6; color: #C7841C; }\r\n.erf-request-type[data-value=\"Internet\"] .erf-request-icon { background: #DDEEFA; color: #0A6EAD; }\r\n\r\n.erf-request-label {\r\n    color: var(--erf-primary-dark);\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n}\r\n\r\n.erf-check {\r\n    position: absolute;\r\n    top: -1px;\r\n    right: -1px;\r\n    width: 22px;\r\n    height: 22px;\r\n\r\n    display: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n    background: var(--erf-primary);\r\n    color: #FFFFFF;\r\n}\r\n\r\n.erf-request-type.active .erf-check { display: flex; }\r\n\r\n.erf-check svg { width: 12px; height: 12px; }\r\n\r\n\/* ---- Field grid ---- *\/\r\n\r\n.erf-grid-2 {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 16px 22px;\r\n}\r\n\r\n.erf-field {\r\n    min-width: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n}\r\n\r\n.erf-field-full { margin-top: 16px; }\r\n\r\n.erf-wrap label {\r\n    color: var(--erf-primary-dark);\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n}\r\n\r\n.erf-wrap label span.erf-req { color: var(--erf-orange); margin-left: 2px; }\r\n.erf-wrap label span.erf-opt { color: var(--erf-muted); font-weight: 500; margin-left: 3px; }\r\n\r\n.erf-input-wrap { position: relative; }\r\n\r\n.erf-input-icon {\r\n    position: absolute;\r\n    left: 13px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 18px;\r\n    height: 18px;\r\n    color: #8098AE;\r\n    pointer-events: none;\r\n    z-index: 2;\r\n}\r\n\r\n.erf-input-icon svg { width: 100%; height: 100%; }\r\n\r\n.erf-wrap input,\r\n.erf-wrap select,\r\n.erf-wrap textarea {\r\n    width: 100%;\r\n    border: 1px solid var(--erf-border);\r\n    border-radius: 10px;\r\n    background: #FFFFFF;\r\n    color: #24435E;\r\n\r\n    font-family: 'Plus Jakarta Sans', Arial, sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 400;\r\n\r\n    outline: none;\r\n    transition: border-color .2s ease, box-shadow .2s ease;\r\n}\r\n\r\n.erf-wrap input,\r\n.erf-wrap select {\r\n    height: 46px;\r\n    padding: 0 14px 0 42px;\r\n}\r\n\r\n.erf-wrap textarea {\r\n    min-height: 96px;\r\n    padding: 13px 14px 13px 42px;\r\n    resize: vertical;\r\n    line-height: 1.5;\r\n}\r\n\r\n.erf-wrap input::placeholder,\r\n.erf-wrap textarea::placeholder { color: #93A6B8; opacity: 1; }\r\n\r\n.erf-wrap input:focus,\r\n.erf-wrap select:focus,\r\n.erf-wrap textarea:focus {\r\n    border-color: var(--erf-blue);\r\n    box-shadow: 0 0 0 3px rgba(10, 110, 173, .10);\r\n}\r\n\r\n.erf-wrap select {\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    cursor: pointer;\r\n    background-image:\r\n        linear-gradient(45deg, transparent 50%, #4D6A82 50%),\r\n        linear-gradient(135deg, #4D6A82 50%, transparent 50%);\r\n    background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px;\r\n    background-size: 4px 4px, 4px 4px;\r\n    background-repeat: no-repeat;\r\n    padding-right: 36px;\r\n}\r\n\r\n.erf-wrap input[type=\"date\"] { color: #45607A; }\r\n\r\n.erf-charcount {\r\n    text-align: right;\r\n    font-size: 10.5px;\r\n    color: var(--erf-muted);\r\n    margin-top: -2px;\r\n}\r\n\r\n.erf-error-msg {\r\n    display: none;\r\n    align-items: center;\r\n    gap: 4px;\r\n    color: var(--erf-danger);\r\n    font-size: 10.5px;\r\n}\r\n\r\n.erf-error-msg.show { display: flex; }\r\n\r\n.erf-wrap input.erf-error,\r\n.erf-wrap select.erf-error,\r\n.erf-wrap textarea.erf-error {\r\n    border-color: var(--erf-danger);\r\n    box-shadow: 0 0 0 3px rgba(224, 82, 82, .08);\r\n}\r\n\r\n\/* ---- Submit ---- *\/\r\n\r\n.erf-submit-wrap { margin-top: 22px; }\r\n\r\n.erf-btn-submit {\r\n    width: 100%;\r\n    height: 48px;\r\n    border: 0;\r\n    border-radius: 24px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 9px;\r\n\r\n    font-family: 'Plus Jakarta Sans', Arial, sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: #FFFFFF;\r\n\r\n    background: linear-gradient(100deg, #0A5A9C 0%, #0B78B8 100%);\r\n    box-shadow: 0 7px 18px rgba(5, 43, 82, .22);\r\n\r\n    cursor: pointer;\r\n    transition: transform .2s ease, box-shadow .2s ease;\r\n}\r\n\r\n.erf-btn-submit:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(5, 43, 82, .28); }\r\n.erf-btn-submit:active { transform: translateY(0); }\r\n.erf-btn-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }\r\n.erf-btn-submit svg { width: 16px; height: 16px; }\r\n\r\n.erf-btn-back {\r\n    width: 100%;\r\n    height: 46px;\r\n    margin-top: 10px;\r\n    border-radius: 24px;\r\n    border: 1px solid var(--erf-border);\r\n    background: #FFFFFF;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 9px;\r\n\r\n    font-family: 'Plus Jakarta Sans', Arial, sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: var(--erf-primary-dark);\r\n    text-decoration: none;\r\n\r\n    cursor: pointer;\r\n    transition: transform .2s ease, border-color .2s ease, background .2s ease;\r\n}\r\n\r\n.erf-btn-back:hover {\r\n    border-color: #8FC0DC;\r\n    background: #F6FAFD;\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.erf-btn-back svg { width: 14px; height: 14px; }\r\n\r\n.erf-spinner {\r\n    display: none;\r\n    width: 16px;\r\n    height: 16px;\r\n    border: 2px solid rgba(255, 255, 255, .4);\r\n    border-top-color: #FFFFFF;\r\n    border-radius: 50%;\r\n    animation: erf-spin .7s linear infinite;\r\n}\r\n\r\n.erf-btn-submit.loading .erf-btn-label { display: none; }\r\n.erf-btn-submit.loading .erf-spinner { display: block; }\r\n\r\n.erf-footer-note {\r\n    margin: 12px 0 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 7px;\r\n    color: var(--erf-muted);\r\n    font-size: 11px;\r\n    text-align: center;\r\n}\r\n\r\n.erf-footer-note svg { width: 13px; height: 13px; flex-shrink: 0; }\r\n\r\n@keyframes erf-spin { to { transform: rotate(360deg); } }\r\n\r\n\/* ============================================================\r\n   RIGHT SIDEBAR \u2014 HOW IT WORKS\r\n============================================================ *\/\r\n\r\n.erf-sidebar-right {\r\n    order: 3;\r\n    position: sticky;\r\n    top: 24px;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n}\r\n\r\n.erf-howitworks-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n}\r\n\r\n.erf-how-step {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 12px;\r\n}\r\n\r\n.erf-how-icon {\r\n    width: 38px;\r\n    height: 38px;\r\n    min-width: 38px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n}\r\n\r\n.erf-how-icon svg { width: 18px; height: 18px; }\r\n\r\n.erf-how-step:nth-child(1) .erf-how-icon { background: var(--erf-primary); }\r\n.erf-how-step:nth-child(2) .erf-how-icon { background: var(--erf-teal); }\r\n.erf-how-step:nth-child(3) .erf-how-icon { background: var(--erf-purple); }\r\n.erf-how-step:nth-child(4) .erf-how-icon { background: var(--erf-green); }\r\n\r\n.erf-how-text strong {\r\n    display: block;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: var(--erf-primary-dark);\r\n    margin-bottom: 2px;\r\n}\r\n\r\n.erf-how-text span {\r\n    display: block;\r\n    font-size: 11.5px;\r\n    line-height: 1.45;\r\n    color: var(--erf-muted);\r\n}\r\n\r\n.erf-track-box .erf-panel-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }\r\n.erf-track-box .erf-panel-title svg { width: 17px; height: 17px; color: var(--erf-primary); }\r\n\r\n.erf-track-box p {\r\n    margin: 0 0 10px;\r\n    font-size: 11.5px;\r\n    line-height: 1.5;\r\n    color: var(--erf-muted);\r\n}\r\n\r\n.erf-track-link {\r\n    font-size: 12.5px;\r\n    font-weight: 700;\r\n    color: var(--erf-primary);\r\n    text-decoration: none;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n}\r\n\r\n.erf-track-link svg { width: 13px; height: 13px; }\r\n\r\n\/* ============================================================\r\n   TOAST\r\n============================================================ *\/\r\n\r\n.erf-toast {\r\n    position: fixed;\r\n    left: 50%;\r\n    bottom: 25px;\r\n    z-index: 999999;\r\n    width: max-content;\r\n    max-width: calc(100vw - 30px);\r\n    transform: translate(-50%, 90px);\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 11px;\r\n    padding: 11px 17px;\r\n\r\n    background: #FFFFFF;\r\n    border: 1px solid #DCEAF4;\r\n    border-radius: 11px;\r\n    box-shadow: 0 12px 35px rgba(0, 0, 0, .10);\r\n    font-family: 'Plus Jakarta Sans', Arial, sans-serif;\r\n\r\n    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);\r\n}\r\n\r\n.erf-toast.show { transform: translate(-50%, 0); }\r\n\r\n.erf-toast-icon {\r\n    width: 30px;\r\n    height: 30px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.erf-toast.success .erf-toast-icon { background: rgba(10, 110, 173, .13); color: #0A6EAD; }\r\n.erf-toast.error .erf-toast-icon { background: rgba(224, 82, 82, .12); color: #E05252; }\r\n\r\n.erf-toast-title { color: #052B52; font-size: 11px; font-weight: 700; margin-bottom: 2px; }\r\n.erf-toast-msg { color: #71869A; font-size: 9px; }\r\n\r\n\/* ============================================================\r\n   RESPONSIVE\r\n============================================================ *\/\r\n\r\n@media (max-width: 1080px) {\r\n    .erf-layout {\r\n        grid-template-columns: 1fr;\r\n    }\r\n    .erf-main { order: 1; }\r\n    .erf-sidebar-left { order: 2; position: static; }\r\n    .erf-sidebar-right { order: 3; position: static; }\r\n    .erf-common-list { flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 4px; }\r\n    .erf-common-item { flex-direction: column; text-align: center; min-width: 130px; gap: 8px; }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n    .erf-wrap { padding: 28px 14px 40px; }\r\n    .erf-page-title { font-size: 28px; }\r\n    .erf-page-subtitle { font-size: 13px; }\r\n    .erf-main { padding: 20px 16px 18px; }\r\n    .erf-request-types { grid-template-columns: repeat(2, 1fr); }\r\n    .erf-grid-2 { grid-template-columns: 1fr; gap: 14px; }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- ============================================================\r\n     FORM\r\n============================================================ -->\r\n\r\n<div class=\"erf-wrap\">\r\n\r\n    <div class=\"erf-page-header\">\r\n        <p class=\"erf-eyebrow\">EMPLOYEE SERVICES<\/p>\r\n        <h1 class=\"erf-page-title\">Submit an <span>Employee Request<\/span><\/h1>\r\n        <p class=\"erf-page-subtitle\">\r\n            Request workplace services through one simple workflow.<br>\r\n            AIX Workspace automatically routes your request to the appropriate team.\r\n        <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"erf-layout\">\r\n\r\n        <!-- ============================================\r\n             LEFT \u2014 COMMON REQUESTS\r\n        ============================================ -->\r\n\r\n        <div class=\"erf-panel erf-sidebar-left\">\r\n\r\n            <h2 class=\"erf-panel-title\">Common Requests<\/h2>\r\n\r\n            <div class=\"erf-common-list\" id=\"erf-common-list\">\r\n\r\n                <div class=\"erf-common-item active\" data-value=\"Laptop\">\r\n                    <div class=\"erf-common-icon\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <rect x=\"4\" y=\"4\" width=\"16\" height=\"12\" rx=\"1\"\/><path d=\"M2 20h20\"\/><path d=\"M8 20l1-2h6l1 2\"\/>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <div class=\"erf-common-text\">\r\n                        <strong>Laptop<\/strong>\r\n                        <span>New device, replacement or upgrade<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"erf-common-item\" data-value=\"Loan\">\r\n                    <div class=\"erf-common-icon\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <ellipse cx=\"12\" cy=\"6\" rx=\"8\" ry=\"3\"\/><path d=\"M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6\"\/><path d=\"M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6\"\/>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <div class=\"erf-common-text\">\r\n                        <strong>Loan<\/strong>\r\n                        <span>Salary advance or personal loan request<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"erf-common-item\" data-value=\"Internet\">\r\n                    <div class=\"erf-common-icon\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <path d=\"M2 8.5a16 16 0 0 1 20 0\"\/><path d=\"M5 12.5a11 11 0 0 1 14 0\"\/><path d=\"M8.5 16.5a6 6 0 0 1 7 0\"\/><circle cx=\"12\" cy=\"19.5\" r=\"1\"\/>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <div class=\"erf-common-text\">\r\n                        <strong>Internet<\/strong>\r\n                        <span>Office or remote internet access<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ============================================\r\n             CENTER \u2014 FORM\r\n        ============================================ -->\r\n\r\n        <div class=\"erf-panel erf-main\">\r\n\r\n            <!-- STEP 1 -->\r\n            <div class=\"erf-section\">\r\n\r\n                <div class=\"erf-section-heading\">\r\n                    <div class=\"erf-section-number\">1<\/div>\r\n                    <div>\r\n                        <h2 class=\"erf-section-title\">Choose Request Type<\/h2>\r\n                        <p class=\"erf-section-description\">Select the category that best matches your request.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"erf-request-types\" id=\"erf-pill-group\">\r\n\r\n                    <div class=\"erf-request-type active\" data-value=\"Laptop\">\r\n                        <div class=\"erf-request-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                                <rect x=\"4\" y=\"4\" width=\"16\" height=\"12\" rx=\"1\"\/><path d=\"M2 20h20\"\/><path d=\"M8 20l1-2h6l1 2\"\/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <span class=\"erf-request-label\">Laptop<\/span>\r\n                        <span class=\"erf-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"erf-request-type\" data-value=\"Loan\">\r\n                        <div class=\"erf-request-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                                <ellipse cx=\"12\" cy=\"6\" rx=\"8\" ry=\"3\"\/><path d=\"M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6\"\/><path d=\"M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6\"\/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <span class=\"erf-request-label\">Loan<\/span>\r\n                        <span class=\"erf-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"erf-request-type\" data-value=\"Internet\">\r\n                        <div class=\"erf-request-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                                <path d=\"M2 8.5a16 16 0 0 1 20 0\"\/><path d=\"M5 12.5a11 11 0 0 1 14 0\"\/><path d=\"M8.5 16.5a6 6 0 0 1 7 0\"\/><circle cx=\"12\" cy=\"19.5\" r=\"1\"\/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <span class=\"erf-request-label\">Internet<\/span>\r\n                        <span class=\"erf-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <input type=\"hidden\" id=\"erf-request_type\" value=\"Laptop\">\r\n                <span class=\"erf-error-msg\" id=\"erf-err-request_type\">\u26a0 Please select a request type.<\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- STEP 2 -->\r\n            <div class=\"erf-section\">\r\n\r\n                <div class=\"erf-section-heading\">\r\n                    <div class=\"erf-section-number\">2<\/div>\r\n                    <div>\r\n                        <h2 class=\"erf-section-title\">Your Information<\/h2>\r\n                        <p class=\"erf-section-description\">Provide your details so we can process your request.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"erf-grid-2\">\r\n\r\n                    <div class=\"erf-field\">\r\n                        <label for=\"erf-requester_name\">Full Name <span class=\"erf-req\">*<\/span><\/label>\r\n                        <div class=\"erf-input-wrap\">\r\n                            <span class=\"erf-input-icon\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"3.5\"\/><path d=\"M5 20c.7-3.2 3.1-5 7-5s6.3 1.8 7 5\"\/><\/svg>\r\n                            <\/span>\r\n                            <input type=\"text\" id=\"erf-requester_name\" placeholder=\"e.g. Abdul Majid\" autocomplete=\"name\">\r\n                        <\/div>\r\n                        <span class=\"erf-error-msg\" id=\"erf-err-requester_name\">\u26a0 Name is required.<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"erf-field\">\r\n                        <label for=\"erf-requester_email\">Work Email <span class=\"erf-req\">*<\/span><\/label>\r\n                        <div class=\"erf-input-wrap\">\r\n                            <span class=\"erf-input-icon\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"\/><polyline points=\"4 7 12 13 20 7\"\/><\/svg>\r\n                            <\/span>\r\n                            <input type=\"email\" id=\"erf-requester_email\" placeholder=\"you@company.com\" autocomplete=\"email\">\r\n                        <\/div>\r\n                        <span class=\"erf-error-msg\" id=\"erf-err-requester_email\">\u26a0 Enter a valid email address.<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"erf-field\">\r\n                        <label for=\"erf-requester_department\">Department <span class=\"erf-req\">*<\/span><\/label>\r\n                        <div class=\"erf-input-wrap\">\r\n                            <span class=\"erf-input-icon\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"10\" width=\"18\" height=\"10\" rx=\"1.5\"\/><path d=\"M8 10V6h8v4\"\/><path d=\"M12 14v2\"\/><path d=\"M7 15h10\"\/><\/svg>\r\n                            <\/span>\r\n                            <select id=\"erf-requester_department\">\r\n                                <option value=\"\">\u2014 Select Department \u2014<\/option>\r\n                                <option value=\"Engineering\">Engineering<\/option>\r\n                                <option value=\"Product\">Product<\/option>\r\n                                <option value=\"Design\">Design<\/option>\r\n                                <option value=\"Marketing\">Marketing<\/option>\r\n                                <option value=\"Sales\">Sales<\/option>\r\n                                <option value=\"Finance\">Finance<\/option>\r\n                                <option value=\"Human Resources\">Human Resources<\/option>\r\n                                <option value=\"Legal\">Legal<\/option>\r\n                                <option value=\"Operations\">Operations<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <span class=\"erf-error-msg\" id=\"erf-err-requester_department\">\u26a0 Please select a department.<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"erf-field\">\r\n                        <label for=\"erf-employee_joining_date\">Employee Joining Date <span class=\"erf-req\">*<\/span><\/label>\r\n                        <div class=\"erf-input-wrap\">\r\n                            <span class=\"erf-input-icon\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"\/><line x1=\"7\" y1=\"3\" x2=\"7\" y2=\"7\"\/><line x1=\"17\" y1=\"3\" x2=\"17\" y2=\"7\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\r\n                            <\/span>\r\n                            <input type=\"date\" id=\"erf-employee_joining_date\">\r\n                        <\/div>\r\n                        <span class=\"erf-error-msg\" id=\"erf-err-employee_joining_date\">\u26a0 Joining date is required.<\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- STEP 3 -->\r\n            <div class=\"erf-section\">\r\n\r\n                <div class=\"erf-section-heading\">\r\n                    <div class=\"erf-section-number\">3<\/div>\r\n                    <div>\r\n                        <h2 class=\"erf-section-title\">Request Details<\/h2>\r\n                        <p class=\"erf-section-description\">Share the vendor, budget and justification for your request.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"erf-grid-2\">\r\n                    <div class=\"erf-field\">\r\n                        <label for=\"erf-company_name\">Vendor \/ Company Name <span class=\"erf-opt\">(Optional)<\/span><\/label>\r\n                        <div class=\"erf-input-wrap\">\r\n                            <span class=\"erf-input-icon\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"4\" width=\"14\" height=\"17\" rx=\"1.5\"\/><path d=\"M9 21v-4h6v4\"\/><path d=\"M9 8h2\"\/><path d=\"M13 8h2\"\/><path d=\"M9 11h2\"\/><path d=\"M13 11h2\"\/><\/svg>\r\n                            <\/span>\r\n                            <input type=\"text\" id=\"erf-company_name\" placeholder=\"e.g. Dell Technologies\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"erf-field\">\r\n                        <label for=\"erf-budget_amount\">Budget Amount (USD) <span class=\"erf-req\">*<\/span><\/label>\r\n                        <div class=\"erf-input-wrap\">\r\n                            <span class=\"erf-input-icon\" style=\"left:14px;\">$<\/span>\r\n                            <input type=\"number\" id=\"erf-budget_amount\" placeholder=\"0.00\" min=\"0\" step=\"0.01\" style=\"padding-left:32px;\">\r\n                        <\/div>\r\n                        <span class=\"erf-error-msg\" id=\"erf-err-budget_amount\">\u26a0 Please enter a valid budget.<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- JUSTIFICATION (shared) -->\r\n                <div class=\"erf-field erf-field-full\">\r\n                    <label for=\"erf-justification\">Justification <span class=\"erf-req\">*<\/span><\/label>\r\n                    <div class=\"erf-input-wrap\">\r\n                        <span class=\"erf-input-icon\" style=\"top:17px; transform:none;\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"\/><line x1=\"8\" y1=\"9\" x2=\"16\" y2=\"9\"\/><line x1=\"8\" y1=\"13\" x2=\"16\" y2=\"13\"\/><line x1=\"8\" y1=\"17\" x2=\"13\" y2=\"17\"\/><\/svg>\r\n                        <\/span>\r\n                        <textarea id=\"erf-justification\" maxlength=\"500\" placeholder=\"Explain why this request is needed and how it supports your work...\"><\/textarea>\r\n                    <\/div>\r\n                    <div class=\"erf-charcount\"><span id=\"erf-charcount-val\">0<\/span>\/500<\/div>\r\n                    <span class=\"erf-error-msg\" id=\"erf-err-justification\">\u26a0 Please provide a justification.<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- SUBMIT -->\r\n            <div class=\"erf-submit-wrap\">\r\n\r\n                <button class=\"erf-btn-submit\" id=\"erf-btn-submit\" type=\"button\">\r\n                    <span class=\"erf-btn-label\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 2L11 13\"\/><path d=\"M22 2l-7 20-4-9-9-4z\"\/><\/svg>\r\n                        Submit Request\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n                    <\/span>\r\n                    <span class=\"erf-spinner\"><\/span>\r\n                <\/button>\r\n\r\n                <a class=\"erf-btn-back\" href=\"https:\/\/aixworkspace.net\/usecases\/\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg>\r\n                    Back\r\n                <\/a>\r\n\r\n                <p class=\"erf-footer-note\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"10\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>\r\n                    You will receive a confirmation email and can track your request status.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ============================================\r\n             RIGHT \u2014 HOW IT WORKS\r\n        ============================================ -->\r\n\r\n        <div class=\"erf-sidebar-right\">\r\n\r\n            <div class=\"erf-panel\">\r\n                <h2 class=\"erf-panel-title\">How It Works<\/h2>\r\n                <p style=\"margin:-8px 0 16px; font-size:11.5px; color:var(--erf-muted);\">From request to resolution<\/p>\r\n\r\n                <div class=\"erf-howitworks-list\">\r\n\r\n                    <div class=\"erf-how-step\">\r\n                        <div class=\"erf-how-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"3.5\"\/><path d=\"M5 20c.7-3.2 3.1-5 7-5s6.3 1.8 7 5\"\/><\/svg>\r\n                        <\/div>\r\n                        <div class=\"erf-how-text\">\r\n                            <strong>1. Submit Request<\/strong>\r\n                            <span>Fill in the simple form.<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"erf-how-step\">\r\n                        <div class=\"erf-how-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\"\/><path d=\"M9 9h6v6H9z\"\/><path d=\"M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2\"\/><\/svg>\r\n                        <\/div>\r\n                        <div class=\"erf-how-text\">\r\n                            <strong>2. AI Routing<\/strong>\r\n                            <span>Automatically routed to the right team.<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"erf-how-step\">\r\n                        <div class=\"erf-how-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"8\" r=\"3\"\/><path d=\"M2 20c.6-3 2.9-5 7-5s6.4 2 7 5\"\/><circle cx=\"17\" cy=\"9\" r=\"2.3\"\/><path d=\"M16 14.2c2.7.2 4.7 1.7 5.2 4.3\"\/><\/svg>\r\n                        <\/div>\r\n                        <div class=\"erf-how-text\">\r\n                            <strong>3. Review &amp; Approval<\/strong>\r\n                            <span>Handled by the relevant department (IT, HR, Finance, etc.).<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"erf-how-step\">\r\n                        <div class=\"erf-how-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n                        <\/div>\r\n                        <div class=\"erf-how-text\">\r\n                            <strong>4. Get Notified<\/strong>\r\n                            <span>Receive updates and completion notification.<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"erf-panel erf-track-box\">\r\n                <h2 class=\"erf-panel-title\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><polyline points=\"12 7 12 12 15 15\"\/><\/svg>\r\n                    Track Your Requests\r\n                <\/h2>\r\n                <p>View the status of all your requests in one place.<\/p>\r\n                <a class=\"erf-track-link\" href=\"https:\/\/docsign.aixworkspace.net\/\">\r\n                    Go to My Requests\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n                <\/a>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- ============================================================\r\n     TOAST\r\n============================================================ -->\r\n\r\n<div class=\"erf-toast\" id=\"erf-toast\">\r\n    <div class=\"erf-toast-icon\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path id=\"erf-toast-path\" d=\"\"><\/path>\r\n        <\/svg>\r\n    <\/div>\r\n    <div class=\"erf-toast-content\">\r\n        <div class=\"erf-toast-title\" id=\"erf-toast-title\"><\/div>\r\n        <div class=\"erf-toast-msg\" id=\"erf-toast-msg\"><\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n    var WEBHOOK_BASE = 'https:\/\/n8n.aixworkspace.net\/webhook\/doc-submit';\r\n\r\n    \/* ========================================================\r\n       REQUEST TYPE SELECTION (pills + left sidebar, kept in sync)\r\n    ======================================================== *\/\r\n\r\n    var pillGroup = document.getElementById('erf-pill-group');\r\n    var commonList = document.getElementById('erf-common-list');\r\n    var reqTypeInput = document.getElementById('erf-request_type');\r\n\r\n    function selectType(value) {\r\n\r\n        pillGroup.querySelectorAll('.erf-request-type').forEach(function (el) {\r\n            el.classList.toggle('active', el.dataset.value === value);\r\n        });\r\n\r\n        commonList.querySelectorAll('.erf-common-item').forEach(function (el) {\r\n            el.classList.toggle('active', el.dataset.value === value);\r\n        });\r\n\r\n        reqTypeInput.value = value;\r\n\r\n        clearErr('request_type');\r\n    }\r\n\r\n    pillGroup.querySelectorAll('.erf-request-type').forEach(function (el) {\r\n        el.addEventListener('click', function () { selectType(el.dataset.value); });\r\n    });\r\n\r\n    commonList.querySelectorAll('.erf-common-item').forEach(function (el) {\r\n        el.addEventListener('click', function () { selectType(el.dataset.value); });\r\n    });\r\n\r\n    \/* ========================================================\r\n       VALIDATION\r\n       (mirrors the reference form: company_name has no asterisk\r\n       and is optional, everything else marked * is required)\r\n    ======================================================== *\/\r\n\r\n    var rules = {\r\n\r\n        request_type: function (v) { return v.trim() !== ''; },\r\n        requester_name: function (v) { return v.trim().length >= 2; },\r\n        requester_email: function (v) { return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v.trim()); },\r\n        requester_department: function (v) { return v !== ''; },\r\n        employee_joining_date: function (v) { return v !== ''; },\r\n        company_name: function () { return true; },\r\n        budget_amount: function (v) { return v !== '' && parseFloat(v) > 0; },\r\n        justification: function (v) { return v.trim().length >= 10; }\r\n\r\n    };\r\n\r\n    function val(id) {\r\n        var el = document.getElementById('erf-' + id);\r\n        return el ? el.value : '';\r\n    }\r\n\r\n    function setErr(id, show) {\r\n        var input = document.getElementById('erf-' + id);\r\n        var msg = document.getElementById('erf-err-' + id);\r\n        if (!input || !msg) return;\r\n        input.classList.toggle('erf-error', show);\r\n        msg.classList.toggle('show', show);\r\n    }\r\n\r\n    function clearErr(id) { setErr(id, false); }\r\n\r\n    function validateAll() {\r\n\r\n        var ok = true;\r\n\r\n        Object.keys(rules).forEach(function (id) {\r\n            var valid = rules[id](val(id));\r\n            setErr(id, !valid);\r\n            if (!valid) ok = false;\r\n        });\r\n\r\n        return ok;\r\n    }\r\n\r\n    \/* Live validation on blur *\/\r\n    Object.keys(rules).forEach(function (id) {\r\n        var el = document.getElementById('erf-' + id);\r\n        if (!el) return;\r\n        el.addEventListener('blur', function () {\r\n            if (val(id) !== '') setErr(id, !rules[id](val(id)));\r\n        });\r\n    });\r\n\r\n    \/* Character counter *\/\r\n    var justificationEl = document.getElementById('erf-justification');\r\n    var charCountEl = document.getElementById('erf-charcount-val');\r\n    justificationEl.addEventListener('input', function () {\r\n        charCountEl.textContent = justificationEl.value.length;\r\n    });\r\n\r\n    \/* ========================================================\r\n       SUBMIT\r\n    ======================================================== *\/\r\n\r\n    document.getElementById('erf-btn-submit').addEventListener('click', async function () {\r\n\r\n        if (!validateAll()) return;\r\n\r\n        var btn = document.getElementById('erf-btn-submit');\r\n        btn.classList.add('loading');\r\n        btn.disabled = true;\r\n\r\n        var payload = {\r\n            request_type: val('request_type'),\r\n            requester_name: val('requester_name').trim(),\r\n            requester_email: val('requester_email').trim(),\r\n            requester_department: val('requester_department'),\r\n            employee_joining_date: val('employee_joining_date'),\r\n            company_name: val('company_name').trim(),\r\n            budget_amount: val('budget_amount'),\r\n            justification: val('justification').trim()\r\n        };\r\n\r\n        var submitOk = false;\r\n\r\n        try {\r\n\r\n            var res = await fetch(WEBHOOK_BASE, {\r\n                method: 'POST',\r\n                headers: { 'Content-Type': 'application\/json' },\r\n                body: JSON.stringify(payload)\r\n            });\r\n\r\n            if (res.ok) {\r\n                submitOk = true;\r\n            } else {\r\n                showToast('error', 'Submission Failed', 'Server returned ' + res.status + '. Please try again.');\r\n            }\r\n\r\n        } catch (err) {\r\n            showToast('error', 'Network Error', 'Could not reach the server. Check your connection.');\r\n        } finally {\r\n            btn.classList.remove('loading');\r\n            btn.disabled = false;\r\n        }\r\n\r\n        if (submitOk) {\r\n            showToast('success', 'Request Submitted!', 'Your request has been received and is under review.');\r\n            resetForm();\r\n        }\r\n\r\n    });\r\n\r\n    function resetForm() {\r\n\r\n        ['requester_name', 'requester_email', 'requester_department', 'employee_joining_date',\r\n         'company_name', 'budget_amount', 'justification'\r\n        ].forEach(function (id) {\r\n            var el = document.getElementById('erf-' + id);\r\n            if (el) el.value = '';\r\n            clearErr(id);\r\n        });\r\n\r\n        charCountEl.textContent = '0';\r\n        selectType('Laptop');\r\n    }\r\n\r\n    \/* ========================================================\r\n       TOAST\r\n    ======================================================== *\/\r\n\r\n    function showToast(type, title, msg) {\r\n\r\n        var toast = document.getElementById('erf-toast');\r\n        var path = document.getElementById('erf-toast-path');\r\n\r\n        toast.className = 'erf-toast ' + type;\r\n        document.getElementById('erf-toast-title').textContent = title;\r\n        document.getElementById('erf-toast-msg').textContent = msg;\r\n\r\n        path.setAttribute('d', type === 'success' ? 'M20 6L9 17l-5-5' : 'M18 6L6 18M6 6l12 12');\r\n\r\n        toast.classList.add('show');\r\n        setTimeout(function () { toast.classList.remove('show'); }, 4500);\r\n    }\r\n\r\n    \/* init *\/\r\n    selectType('Laptop');\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>EMPLOYEE SERVICES Submit an Employee Request Request workplace services through one simple workflow. AIX Workspace automatically routes your request to the appropriate team. Common Requests Laptop New device, replacement or upgrade Loan Salary advance or personal loan request Internet Office or remote internet access 1 Choose Request Type Select the category that best matches your [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-545","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/pages\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":118,"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/pages\/545\/revisions"}],"predecessor-version":[{"id":2208,"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/pages\/545\/revisions\/2208"}],"wp:attachment":[{"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/media?parent=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}