<!DOCTYPE html>

<html>

<head>
    <title>Flow</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <link rel="icon" type="image/gif/png" href="../images/icon.png">
    <!-- CSS -->
    <link href="bootstrap-3.3.2-dist/css/filter.svg" rel="stylesheet" />
    <!--<link href="bootstrap-3.3.2-dist/css/bootstrap-select.min.css" rel="stylesheet" />-->
    <!-- <link href="thems/dark.css" rel="stylesheet" />-->
    <!--<script src="bootstrap-3.3.2-dist/js/ColReorderWithResize.js"></script>-->

    <link id="theme" href="bootstrap-3.3.2-dist/css/default.css" rel="stylesheet" />
    <link href="bootstrap-3.3.2-dist/css/buttons.dataTables.min.css" rel="stylesheet" />
    <link href="bootstrap-3.3.2-dist/css/dataTables.bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-3.3.2-dist/css/jquery.dataTables.min.css" rel="stylesheet" />

    <link href="bootstrap-3.3.2-dist/css/jquery.orgchart.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="bootstrap-3.3.2-dist/css/font-awesome.min.css">


    <link rel='stylesheet' href='bootstrap-3.3.2-dist/css/fullcalendar.css' />


    <link href="bootstrap-3.3.2-dist/css/jquery-ui.css" rel="stylesheet">

    <link href="bootstrap-3.3.2-dist/css/customes-bootstrap.css" rel="stylesheet" />

    <!-- JavaScript -->
    <script src="bootstrap-3.3.2-dist/js/jquery-1.12.4.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/jquery.xmlrpc.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/jquery.dataTables.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/dataTables.buttons.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/dataTables.bootstrap.js"></script>
    <script src="bootstrap-3.3.2-dist/js/buttons.print.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/buttons.colVis.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/jszip.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/pdfmake.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/buttons.html5.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/vfs_fonts.js"></script>
    <script src="bootstrap-3.3.2-dist/js/canvasjs.min.js"></script>
    <!-- Firebase -->
    <script src="js/firebase-app.js"></script>
    <script src="js/firebase-messaging.js"></script>
    <!-- Firebase -->
    <script src="bootstrap-3.3.2-dist/js/jspdf.min.js"></script>

    <script src="bootstrap-3.3.2-dist/js/Select.js"></script>

    <!--<script src="bootstrap-3.3.2-dist/js/chart.js"></script>-->
    <!-- <script src="bootstrap-3.3.2-dist/js/Chart.min.js"></script> -->
    <!--<script src="bootstrap-3.3.2-dist/js/Chart.bundle.js"></script>-->
    <script src="bootstrap-3.3.2-dist/js/Chart.bundle.min.js"></script>
    <!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>-->
    <script src="js/jquery/jquery-ui.min.js"></script>
    <script src="src/Flow.js?v=20261019b"></script>
    <script src="src/qrcode.min.js"></script>
    <script src="js/jquery.orgchart.js"></script>
    <!-- <script src="js/jquery.keypad.js"></script> -->
    <script src='bootstrap-3.3.2-dist/js/moment.min.js'></script>
    <script src='bootstrap-3.3.2-dist/js/fullcalendar.min.js'></script>
    <script src="js/xlsx.full.min.js"></script>


    <link rel="stylesheet" href="bootstrap-3.3.2-dist/css/leaflet.css" />
    <script src="bootstrap-3.3.2-dist/js/leaflet.js"></script>
    <script src="bootstrap-3.3.2-dist/js/leaflet-v1-7-1.js"></script>
    <script src="bootstrap-3.3.2-dist/js/leaflet-routing-machine.js"></script>
    <script src="bootstrap-3.3.2-dist/js/orgchart.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/apextree@1.3.0/apextree.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.6/jsplumb.min.js"></script> -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> -->
    <link rel="stylesheet" href="bootstrap-3.3.2-dist/css/leaflet-routing-machine.css" />
    <!--<script src="bootstrap-3.3.2-dist/js/select2.min.js"></script>-->
    <script src="js/vendor/select2/4.0.13/select2.min.js"></script>
    <link href="js/vendor/select2/4.0.13/select2.min.css" rel="stylesheet" />

    <!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
    <script src="js/vendor/d3/7/d3.v7.min.js"></script>
    <script src="js/vendor/d3-org-chart/3.0.1/d3-org-chart.js"></script>
    <script src="js/vendor/d3-flextree/2.1.2/d3-flextree.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.2-dist/css/jquery.orgchart.css">
    <script src="bootstrap-3.3.2-dist/js/jquery.orgchart.js"></script>
    <link href="src/main-ui.css?v=20261021chg2" rel="stylesheet" />
    <script charset="utf-8" src="src/flow-loading.js?v=20261005d"></script>
    <script charset="utf-8" src="src/main-ui.js?v=20261019l"></script>
    <link href="src/assistant.css" rel="stylesheet" />
    <script charset="utf-8" src="src/wolf-pet.js"></script>
    <script charset="utf-8" src="src/assistant.js"></script>
    <script charset="utf-8" src="src/assistant-pages.js"></script>
    <script charset="utf-8" src="src/login-bg.js?v=20261018b"></script>
    <script charset="utf-8" src="src/flow-ticket.js"></script>
    <script charset="utf-8" src="src/header-ui.js"></script>
    <script charset="utf-8" src="src/calendar-ui.js?v=20261006cx"></script>
    <script charset="utf-8" src="src/flow-notify.js?v=20261006gxo"></script>
    <script charset="utf-8" src="src/flow-changelog.js?v=20261022chg"></script>
    <script charset="utf-8" src="src/charts-ui.js"></script>
    <!-- include Tabulator’s CSS & JS once in your page head -->

    <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css"
/>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.pageLength.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.fullscreen.min.js"></script> -->










    <!-- <script src="path/to/qrcode.min.js"></script> -->
    <style>
        .btnm {
            height: 20px;
            white-space: normal;
            font-size: 12px;
        }

        @media print {
            tr.vendorListHeading {
                background-color: #999999 !important;
                -webkit-print-color-adjust: exact;
            }
        }

        @media print {
            .vendorListHeading th {
                color: white !important;
            }
        }

        body {
            -webkit-print-color-adjust: exact;
        }

        .focus {
            color: red;
        }

        .ui-helper-hidden-accessible {
            display: none;
        }
    </style>
</head>

<body>
    <script>

        // Flow web push (Firebase project flow-notification-ab7da). The token is sent to the server at login
        // (Flow.js LOGIN -> FlowFireBaseID) and kept on that user's record.
        var firebaseConfig = {
            apiKey: "AIzaSyBW4HLuushI3jafEVYJnZ0qqFUPGtv55iE",
            authDomain: "flow-notification-ab7da.firebaseapp.com",
            projectId: "flow-notification-ab7da",
            storageBucket: "flow-notification-ab7da.firebasestorage.app",
            messagingSenderId: "1050283129874",
            appId: "1:1050283129874:web:23175ca6abc008189eeccb"
        };
        var FLOW_VAPID = "BLsRLOIWvhnXqUCCQJwpmJKEIG_TMEVjjgShAwaZAdvWmXH-CgBnPZ65cSU1_KhQRjfkTHRt6SUkrcp8lkSyfQU";
        var messaging = null;
        try {
            // push needs https (or localhost) and a supporting browser; otherwise the app simply runs without it
            if (window.isSecureContext && firebase.messaging.isSupported()) {
                firebase.initializeApp(firebaseConfig);
                messaging = firebase.messaging();
            }
        } catch (e) {
            messaging = null;
            console.log('Flow push: firebase init failed', e);
        }
        if (!messaging) {
            console.log('Flow push: not started. secureContext=' + window.isSecureContext +
                ', serviceWorker=' + ('serviceWorker' in navigator) +
                ', supported=' + (window.firebase && firebase.messaging && firebase.messaging.isSupported ? firebase.messaging.isSupported() : 'n/a'));
        }

        function IntitalizeFireBaseMessaging() {
            if (!messaging) { return; }
            navigator.serviceWorker.register('src/firebase-messaging-sw.js')
                .then(function (reg) {
                    messaging.useServiceWorker(reg);
                    messaging.usePublicVapidKey(FLOW_VAPID);
                    return messaging.requestPermission();
                })
                .then(function () {
                    return messaging.getToken();
                })
                .then(function (token) {
                    $('#token').val(token);
                    
                })
                .catch(function (reason) {
                    // typical reasons: service worker file not found, notification permission blocked, wrong VAPID / project
                    console.log('Flow push: token not created', reason && (reason.code || reason.message) || reason, 'permission=' + (window.Notification ? Notification.permission : 'n/a'));
                });
        }
        if (messaging) {
            messaging.onMessage(function (payload) {
                // page is open: show a desktop notification and refresh the bell
                var n = (payload && (payload.notification || payload.data)) || {};
                if (window.Notification && Notification.permission === "granted" && n.title) {
                    try { new Notification(n.title, { body: n.body || '' }); } catch (e) { }
                }
                if (window.FlowNotify) { window.FlowNotify.refresh(); }
            });
        }
        IntitalizeFireBaseMessaging();
    </script>
    <input type="hidden" id="token" value="" />
    <div id="header">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" onclick="showMnu();">

                        <span class="glyphicon glyphicon-menu-hamburger" style=" color: #3386af"></span>
                    </a>
                    <img alt="Brand" src='../src/common/erp-1.png'>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href=".."><span class="glyphicon glyphicon-home"></span> <span
                                    id="HEADERHome">Home</span></a></li>
                        <li><a href="#" onclick="CMDNEW_Click();"><span class="glyphicon glyphicon-file"></span><span
                                    id="HEADERNew">New</span></a></li>
                        <li><a href="#" onclick="CMDSAV_Click();"><span
                                    class="glyphicon glyphicon-floppy-disk"></span><span id="HEADERSave">Save</span></a>
                        </li>
                        <li id="CMDSTP"><a href="#" onclick="CMDSTP_Click();"><span
                                    class="glyphicon glyphicon-pause"></span><span id="HEADERHold">Hold</span></a></li>
                        <li><a href="#" onclick="CMDDEL_Click();"><span class="glyphicon glyphicon-trash"></span><span
                                    id="HEADERDelete">Delete</span></a></li>
                        <li><a href="#" onclick="CMDATH_Click();"><span
                                    class="glyphicon glyphicon-paperclip"></span><span
                                    id="HEADERAttach">Attach</span></a></li>
                        <li><a href="#" onclick="CMDIMP_Click();"><span class="glyphicon glyphicon-log-in"></span><span
                                    id="HEADERImport">Import</span></a></li>
                        <li><a href="#" onclick="CMDEXP_Click();"><span class="glyphicon glyphicon-log-out"></span><span
                                    id="HEADERExport">Export</span></a></li>
                        <li><a href="#" onclick="CMDREF_Click();"><span class="glyphicon glyphicon-refresh"></span><span
                                    id="HEADERRefresh">Refresh</span></a></li>
                        <li><a href="#" onclick="CMDPRT_Click();"><span class="glyphicon glyphicon-print"></span><span
                                    id="HEADERPrint">Print</span></a></li>

                    </ul>
                    <div
                        style="display: flex; flex-direction: row; align-items: flex-start; align-content: flex-end; flex-wrap: nowrap; justify-content: space-evenly;">


                        <div class="mui-srch" id="MUISRCH">
                            <button type="button" id="MUISRCHTOG" class="mui-srch-btn" aria-label="Search"
                                title="Search" aria-haspopup="dialog" aria-expanded="false">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="11" cy="11" r="7" />
                                    <path d="M20 20l-3.5-3.5" />
                                </svg>
                            </button>
                            <div class="mui-srch-pop" id="MUISRCHPOP" role="dialog" aria-label="Search">
                                <!-- the original search input and button, unchanged, only moved into the popup -->
                                <div class="input-group">
                                    <input id='SEARCHBAR' type='text' class='form-control' placeholder='Search' />
                                    <span id='SEARCHBARFlow_Button' class="input-group-addon" onclick="GetPageBySearch();"
                                        style="width: 0%;display: inline-flex;flex-direction: column;flex-wrap: wrap;align-content: center;padding: 9px 13px;"><span
                                            class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                                </div>
                            </div>
                        </div>

                        <!--  SEARCHBAR -->


                        <ul class="nav navbar-nav navbar-right" style="width: 110px; flex: 1 0; flex-basis: content;">

                            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span
                                        class="glyphicon glyphicon-user"></span><span id="HEADERUser">User</span><span
                                        class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#" class="thumbnail">
                                            <img id="HIMG" src="../images/noimage.jpg" alt="User ID"
                                                style="width:60px; height:70px;">
                                        </a>
                                    </li>

                                    <li><a href="#" onclick="SHWHLP();"><span id="HEADERHelp">Help</span></a></li>
                                    <li><a href="http://microsystems-eg.com/contact.html" target="_blank"> <span
                                                id="HEADERContactUs">Contact Us</span></a></li>
                                    <li><a href="#" onclick="if(window.FlowAssistant){FlowAssistant.openTicket();}return false;"><span
                                                id="HEADERReport">Report a problem</span></a></li>
                                    <li><a href="http://microsystems-eg.com/contact.html" target="_blank"><span
                                                id="HEADERMessage">Message</span></a></li>
                                    <li><a href="#" onclick="SHOWCHG();"><span id="HEADERPassword">Change
                                                Password</span></a></li>
                                    <li><a href="#" onclick="CLRLOCSTR();"><span id="HEADERLocalStorage">Clear local
                                                Storage</span></a></li>
                                    <li><a href="#" id="udes" onclick="LOGOUT();"><span
                                                id="HEADERLogout">Logout</span></a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </nav>
    </div>

    <!-- Main -->

    <div class="container-fluid" style="margin-top: 60px">

        <div class="row">
            <!--left menu-->
            <div class="col-sm-2" id="LFT-MNU">
                <!-- Left column -->
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#collapse1">Masters</button>
                    </div>
                    <div class="panel panel-default">
                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#approval">Approvals</button>
                    </div>
                    <div class="panel panel-default">

                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#collapse2">Inventory</button>
                    </div>
                    <div class="panel panel-default">
                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#collapse3">Sales</button>

                    </div>
                    <div class="panel panel-default">
                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#collapse4">Supply Chain</button>
                    </div>
                    <div class="panel panel-default">

                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#Production">Production</button>


                    </div>
                    <div class="panel panel-default">

                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#PROACC">Project Accounts</button>


                    </div>
                    <div class="panel panel-default">

                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#JOBORD">Job Orders</button>


                    </div>

                    <div class="panel panel-default">

                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#EHRMNU">Human Resources</button>


                    </div>
                    <div class="panel panel-default">


                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#collapse5">General Ledger</button>

                    </div>
                    <div class="panel panel-default">

                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#collapse9">Safes & Banks</button>

                    </div>
                    <div class="panel panel-default">

                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#collapse6">Shipping</button>

                    </div>
                    <div class="panel panel-default">
                        <button type="button" class="btn btn-info btn-block" data-toggle="collapse"
                            data-parent="#accordion" data-target="#collapse7">Secuirty</button>

                    </div>
                </div>



            </div>
            <!--end left menu-->



            <div class="col-sm-10" id="FLW-COL">

                <div id="MUIBAR" aria-live="polite"></div>
                <div class="container-fluid" id="FLOW">
                    <!--Alert message-->

                    <div id="MUIHELLO"></div>
                    <div id="RECENT"></div>


                    <!--Alert message-->

                    <!--<div class="alert alert-success" role="alert" style="text-align: right; font-size: large;"><b>تنبه هام</b>
                        <br>

                            عملاءنا الكرام يرجى العلم بأن سيتم اصدار تحديث نظام الخزن و البنوك ابتداءً من تاريخ 1\4\2023 مع العلم انه يمكن بدء استخدام الاصدار الجديد الان على سيرفر 
                            <br>
                            <a href = "http://flow.microsystems-eg.com/"><b>flow.microsystems-eg.com</b></a>
                            <br>
                            <b>ملحوظة هامه</b> 
                            <br>
                            حقيقية وليست على سبيل التجربه

                            <a href = "http://flow.microsystems-eg.com/"><b>flow.microsystems-eg.com</b></a>
                            جميع الحركات التى سوف يتم ادخالها على سيرفر 
                            <br>
                            يمكنكم معرفة أخر التحديثات على الخزن والبنوك من
                            <a href = "src/banks.pdf" target="_blank"><b> هنا</b></a>
                            <br>
                            ويمكنكم مشاهدة فيديوهات للمساعدة عن التحديث   
                            <a href = "https://www.youtube.com/watch?v=IgEY4vPi_lM" target="_blank"><b>تقارير الخزن والبنوك</b></a>
                            و
                         <a href = "https://www.youtube.com/watch?v=_r8T4Mf6Y1k" target="_blank" ><b>حركات الخزن والبنوك</b></a>

                            <br>
                            وشكراً لحسن تعاونكم
                    </div>-->
                    <!--Alert message-->

                    <!--<div class="alert alert-success" role="alert" style="text-align: right; font-size: large;"><b>تنبه هام</b>
                        <br>

                            عملاءنا الكرام يرجى العلم بأن سيتم اصدار تحديث نظام الخزن و البنوك ابتداءً من تاريخ 1\4\2023 مع العلم انه يمكن بدء استخدام الاصدار الجديد الان على سيرفر 
                            <br>
                            <a href = "http://flow.microsystems-eg.com/"><b>flow.microsystems-eg.com</b></a>
                            <br>
                            <b>ملحوظة هامه</b> 
                            <br>
                            حقيقية وليست على سبيل التجربه

                            <a href = "http://flow.microsystems-eg.com/"><b>flow.microsystems-eg.com</b></a>
                            جميع الحركات التى سوف يتم ادخالها على سيرفر 
                            <br>
                            يمكنكم معرفة أخر التحديثات على الخزن والبنوك من
                            <a href = "src/banks.pdf" target="_blank"><b> هنا</b></a>
                            <br>
                            ويمكنكم مشاهدة فيديوهات للمساعدة عن التحديث   
                            <a href = "https://www.youtube.com/watch?v=IgEY4vPi_lM" target="_blank"><b>تقارير الخزن والبنوك</b></a>
                            و
                         <a href = "https://www.youtube.com/watch?v=_r8T4Mf6Y1k" target="_blank" ><b>حركات الخزن والبنوك</b></a>

                            <br>
                            وشكراً لحسن تعاونكم
                    </div>-->
                    <!--Alert message-->

                    <div id="myCarousel" class="carousel slide" data-ride="carousel">

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">

                                <p style="text-align: center; font-size: larger"> <a
                                        href="https://www.youtube.com/watch?v=N2SZg44T8sI" class="btn btn-sm btn-info"
                                        target="_blank"> <i class="glyphicon glyphicon-play"></i></a>كل ما تريد أن تعرفه
                                    عن نظام إدارة المبيعات والعملاء </p>
                            </div>
                            <div class="item">
                                <p style="text-align: center; font-size: larger"> <a
                                        href="https://www.youtube.com/watch?v=YhyvEBtRFyk" class="btn btn-sm btn-info"
                                        target="_blank"> <i class="glyphicon glyphicon-play"></i></a> امكانيه ربط النظام
                                    بمنظومه الفاتوره الالكترونيه </p>
                            </div>
                            <div class="item">
                                <p style="text-align: center; font-size: larger"> <a
                                        href="https://www.youtube.com/watch?v=rjO94xU12Ik" class="btn btn-sm btn-info"
                                        target="_blank"> <i class="glyphicon glyphicon-play"></i></a> شرح مبسط لتكوين
                                    شجره حسابات على النظام </p>
                            </div>
                            <div class="item">
                                <p style="text-align: center; font-size: larger"> <a
                                        href="https://www.youtube.com/watch?v=XXCSMnDgW9o" class="btn btn-sm btn-info"
                                        target="_blank"> <i class="glyphicon glyphicon-play"></i></a> أمكانيه دمج
                                    التقارير </p>
                            </div>
                            <div class="item">
                                <p style="text-align: center; font-size: larger"> <a
                                        href="https://www.youtube.com/watch?v=ZVyTfrNO9y4" class="btn btn-sm btn-info"
                                        target="_blank"> <i class="glyphicon glyphicon-play"></i></a> مراكز التكلفة في
                                    الحسابات العامة </p>
                            </div>
                            <div class="item">
                                <p style="text-align: center; font-size: larger"> <a
                                        href="https://www.youtube.com/watch?v=8_fwO7PsnbQ" class="btn btn-sm btn-info"
                                        target="_blank"> <i class="glyphicon glyphicon-play"></i></a> دليل الحسبات فى
                                    الحسابات العامة </p>
                            </div>
                            <div class="item">
                                <p style="text-align: center; font-size: larger"> <a
                                        href="https://www.youtube.com/watch?v=9GmO2mXqVNo" class="btn btn-sm btn-info"
                                        target="_blank"> <i class="glyphicon glyphicon-play"></i></a> تصميم قوائم الدخل
                                    في الحسابات العامة</p>
                            </div>
                            <div class="item">
                                <p style="text-align: center; font-size: larger"> <a
                                        href="https://www.youtube.com/watch?v=ImS2xl5ma7c" class="btn btn-sm btn-info"
                                        target="_blank"> <i class="glyphicon glyphicon-play"></i></a> كل ما تريد ان
                                    تعرفه عن نظام المخازن </p>
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>

                    </div>


                    <div class="row">
                        <div class="col-lg-12">

                            <div class="panel panel-info">

                                <div class="panel-body">

                                    <table id="DTLTMP"></table>

                                    <ul class="nav nav-defult nav-justified" id="MUITABS">
                                        <li class="active"><a data-toggle="tab" href="#home"
                                                class="btn btn-default btn-block"><i
                                                    class="glyphicon glyphicon-th-list"></i> User Guide</a></li>
                                        <li><a onclick="LDPAGE('GLDSH', $('#GLDSH'));" href="#GLDSH" data-toggle="tab"
                                                class="btn btn-default btn-block"><i
                                                    class="glyphicon glyphicon-dashboard"></i> Dashboard</a></li>
                                        <li><a onclick="SHWCLN();" data-toggle="tab" href="#Calendar"
                                                class="btn btn-default btn-block"><i
                                                    class="glyphicon glyphicon-calendar"></i> Calendar </a></li>
                                        <li><a onclick="LDPAGE('HRREQ', $('#HRREQ'));" href="#HRREQ" data-toggle="tab"
                                                class="btn btn-default btn-block" id="SS"><i
                                                    class="glyphicon glyphicon-user"></i> Self Services</a></li>
                                    </ul>
                                    <br />
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="home">
                                            <div class="row">
                                                <div class="col-md-12">

                                                    <marquee behavior="scroll" direction="right" scrolldelay="200"
                                                        bgcolor="#ddd" style="font-size: 20px" id="NEWS"> يمكنك الآن
                                                        اعداد الاخبار الخاصه بالمؤسسه </marquee>
                                                </div>
                                            </div>
                                            <div id="MUIMODS"></div>


                                        </div>
                                        <div class="tab-pane" id="GLDSH">
                                            <h4><i class="glyphicon glyphicon-wrench"></i></h4>


                                        </div>

                                        <div class="tab-pane" id="Calendar">

                                            <div class="row">
                                                <div class="col-md-12" id="cc">
                                                    <div class="panel panel-info">
                                                        <div class="panel-heading">
                                                            <h4>Calendar</h4>
                                                        </div>
                                                        <div class="panel-body">
                                                            <div id="Div2"></div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">

                                                <div class="col-lg-12">


                                                    <div class="btn-group btn-group-justified">
                                                        <a href="#" class="btn btn-info" onclick="LDMYSG();"><strong><i
                                                                    class="glyphicon glyphicon-envelope"></i>Message</strong></a>
                                                        <a href="#" class="btn btn-info" data-toggle="modal"
                                                            data-target="#Creat"><i
                                                                class=" glyphicon glyphicon-pencil"></i>Create
                                                            Message</a>


                                                    </div>


                                                    <div class="modal fade" id="Creat" role="dialog">
                                                        <div class="modal-dialog">


                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <button type="button" class="close"
                                                                        data-dismiss="modal">&times;</button>
                                                                    <h4 class="modal-title"><i
                                                                            class=" glyphicon glyphicon-pencil"></i>Create
                                                                        Message</h4>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form>
                                                                        <div class="form-group">
                                                                            <label>To</label>
                                                                            <input type="text" class="form-control"
                                                                                id="USR" />
                                                                            <label>Message</label>
                                                                            <textarea class="form-control" rows="5"
                                                                                id="TMSG"></textarea>

                                                                        </div>
                                                                    </form>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default"
                                                                        data-dismiss="modal"
                                                                        onclick="send();">Send</button>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>

                                                    <div class="modal fade" id="MRPT" role="dialog">
                                                        <div class="modal-dialog">

                                                            <!-- Modal content-->
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <button type="button" class="close"
                                                                        data-dismiss="modal">&times;</button>
                                                                    <h4 class="modal-title">Save Report Details</h4>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form>
                                                                        <div class="form-group">
                                                                            <label>To</label>
                                                                            <input type="text" class="form-control"
                                                                                id="Text1" />
                                                                            <label>Message</label>
                                                                            <textarea class="form-control" rows="5"
                                                                                id="Textarea1"></textarea>

                                                                        </div>
                                                                    </form>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default"
                                                                        data-dismiss="modal"
                                                                        onclick="send();">Send</button>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--<div class="row">
                                                <div class="col-md-12">
                                                    <div class="div-table-content">

                                                        <table class="table table-bordered" id="USRMSG"></table>
                                                    </div>


                                                </div>
                                            </div>-->



                                        </div>

                                        <div class="tab-pane" id="HRREQ">
                                        </div>
                                    </div>

                                </div>

                                <div class="clearfix visible-lg"></div>

                            </div>
                        </div>
                    </div>
                    <div class="row" id="MUIPERSONAL">
                        <div class="col-lg-12">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h4>Personal</h4>
                                </div>
                                <div class="panel-body">

                                    <ul class="nav nav-defult nav-justified" id="myTab">

                                        <li class="active"><a href="#profile" data-toggle="tab"><i
                                                    class="glyphicon glyphicon-user"></i>Personal Profile</a></li>
                                        <li><a href="#Time" data-toggle="tab"><i
                                                    class="glyphicon glyphicon-time"></i>Time & Attendance Record</a>
                                        </li>

                                    </ul>

                                    <div class="tab-content">

                                        <div class="tab-pane active" id="profile">
                                            <h4><i class="glyphicon glyphicon-user"></i></h4>
                                            <div class="row">
                                                <div class="col-lg-9">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <div class="well well-sm">
                                                                <div class="form-group form-inline">
                                                                    <label>User ID</label>
                                                                    <input type="text" class="form-control" name="ID"
                                                                        id="UID" readonly="text">
                                                                    <label>User Name</label>
                                                                    <input type="text" class="form-control" name="NAME"
                                                                        id="UNAME" readonly="text">
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="form-group">

                                                                <label>Name</label>
                                                                <input type="text" class="form-control" id="EMPNAM">
                                                                <label>E-mail</label>
                                                                <input type="text" class="form-control" id="EML"
                                                                    data-toggle="tooltip" title="name@domain name.com">
                                                                <label>Address</label>
                                                                <input type="text" class="form-control" id="ADD">
                                                                <label>Tel.</label>
                                                                <input type="text" class="form-control" id="TEL1"
                                                                    placeholder="Tel.(1)">
                                                                <input type="text" class="form-control" id="TEL2"
                                                                    placeholder="Tel.(2)">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group">

                                                                <label>Date Of Birth</label>
                                                                <input type="text" class="form-control" id="BRDATE">
                                                                <label>Gender</label>
                                                                <select class="form-control" id="SEX">
                                                                    <option>..please select..</option>
                                                                    <option value="0">Male</option>
                                                                    <option value="1">Female</option>
                                                                </select>
                                                                <label>Status</label>
                                                                <select class="form-control" id="MTRSTATUS">
                                                                    <option value="-1">..please select..</option>
                                                                    <option value="1">Single</option>
                                                                    <option value="2">Married</option>
                                                                    <option value="3">Widowed</option>
                                                                    <option value="4">Divorced</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="btn-group">
                                                        <button type="button" class="btn btn-info" id="IMPIMG"><span
                                                                class="glyphicon glyphicon-file"></span> Select</button>
                                                        <button type="button" class="btn btn-info" id="IMGUPL"
                                                            onclick="UploadPic();"><span
                                                                class="glyphicon glyphicon-cloud-upload"></span>
                                                            Upload</button>

                                                        <button type="button" class="btn btn-default" id="GETFIL"><span
                                                                class="glyphicon glyphicon-cloud-download"></span>
                                                            Download</button>
                                                        <input type='file' id="asd" accept="image/*"
                                                            style="display: none;" />

                                                        <button class="btn btn-default"><span
                                                                class="glyphicon glyphicon-camera"></span></button>
                                                        <button class="btn btn-default" onclick="OPN();"><span
                                                                class="glyphicon glyphicon-folder-open"></span></button>
                                                        <button class="btn btn-default"><span
                                                                class="glyphicon glyphicon-cloud-upload"></span></button>
                                                    </div>
                                                    <button class="btn btn-default" onclick="OPN();"
                                                        data-toggle="tooltip" title="Select File"><span
                                                            class="glyphicon glyphicon-folder-open"></span></button>
                                                    `<input type='file' id="asd" accept="image/*" style="display: none;"
                                                        multiple />
                                                    <button class="btn btn-default" onclick="UPL();"
                                                        data-toggle="tooltip" title="Upload File"><span
                                                            class="glyphicon glyphicon-cloud-upload"></span></button>
                                                    <img id="USRIMG" src="../IMAGES/noimage.jpg" alt="..."
                                                        class="img-thumbnail" style="width: 200px; height: 250px;">
                                                </div>
                                            </div>
                                        </div>
                                        <!--<div class="tab-pane" id="messages">
                    <h4><i class="glyphicon glyphicon-time"></i></h4>
                      
                          <div class="col-lg-6">
                              <div class="form-group">
                                  <label>start date</label>
                        <div class="input-group">
                        <input type="date" class="form-control" id="Date1">
                         <span class="input-group-addon" id="Span2"><i class="glyphicon glyphicon-calendar"></i></span>
                            </div>
                        <label>End Date</label>
                        <div class="input-group">
                        <input type="date" class="form-control" id="Date2">
                            <span class="input-group-addon" id="Span3"><i class="glyphicon glyphicon-calendar"></i></span>
                            </div>
                                 
                              </div>
                          </div>
                      
                   
                          <div class="col-lg-6">
                              <h4>My Records <a href="#"> <span class="glyphicon glyphicon-refresh"></span> </a></h4>
                              <table class="table  table-hover">
    <thead>
        <tr  class="info">
            <th>Date</th>
            <th>Type</th>
            <th>Time</th>
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
           
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
         
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
           
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
          
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
           
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
           
        </tr>
    </tbody>
</table>
                          </div>
                      </div>-->




                                    </div>
                                    <div class="tab-pane" id="Time">
                                        <div class="row">
                                            <!--<div class="col-md-4">
                                                    <label>From Date</label>
                                                    <div class="input-group">
                                                        <input type="date" class="form-control" id="FD" value="2026-10-01" />
                                                        <span class="input-group-addon" id="Span5"><i class="glyphicon glyphicon-calendar"></i></span>
                                                    </div>
                                                </div>


                                                <div class="col-md-4">
                                                    <label>To Date</label>
                                                    <div class="input-group">
                                                        <input type="date" class="form-control" id="LD" value="2026-10-30" />
                                                        <span class="input-group-addon" id="Span2"><i class="glyphicon glyphicon-calendar"></i></span>
                                                    </div>
                                                </div>-->

                                            <div class="col-md-4">
                                                <br />


                                            </div>

                                        </div>
                                        <div class="row">
                                            <table id="DTL" class="table table-striped table-bordered">
                                            </table>
                                        </div>
                                    </div>

                                </div>

                                <div class="clearfix visible-lg"></div>

                            </div>

                        </div>
                    </div>





                    <div class="row" id="MUINEWS">
                        <div class="col-lg-12">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h4>Company News</h4>
                                </div>
                                <div class="panel-body">


                                </div>
                            </div>
                        </div>
                    </div>








                </div>
                <!--/col-span-9-->
            </div>
            <!--/col-span-9-->

        </div>
        <p></p>
        <p></p>
    </div>
    <div id="footer">
    </div>
    <div id="IMPDTA">
        <div id="IMPFIL" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
            data-keyboard="false">
            <div class="modal-dialog" style="width: auto;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button id="Button2" type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="H2">Import Data File</h4>
                    </div>

                    <form class="form col-md-12 center-block">
                        <div class="row">
                            <div class="col-md-8">
                                <fieldset class="scheduler-border">
                                    <legend class="scheduler-border">برجاء اتباع المحددات</legend>
                                    <div id="IMPFRM"></div>
                                </fieldset>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label id="Label1">Select File To Upload</label>


                                    <button class="btn btn-primary btn-block " onclick="GETTEMPLATE();"
                                        type="button"><span class="glyphicon glyphicon-download"></span> Download
                                        Template</button>


                                    <button class="btn btn-default btn-block" onclick="SelectFile();"
                                        type="button"><span class="glyphicon glyphicon-open-file"></span> Select a
                                        file</button>


                                    <button class="btn btn-success btn-block" onclick="IMPDTA();" type="button"><span
                                            class="glyphicon glyphicon-upload"></span> Upload</button>


                                </div>
                            </div>
                            <!-- <div class="form-group">
									<label id="STSTXT"></label>
                                </div>
                                 -->
                        </div>
                        <label id="IMPROW" hidden></label>
                        <div class="div-scroll-bar" id="convertedExcell" style="overflow: auto; "></div>

                        <input type="hidden" id="IMPTXT" value="" />
                        <input type="hidden" id="IMP_MASNA" value="" />
                        <input type="hidden" id="IMP_FLD" value="" />
                        <input type="hidden" id="IMP_SLKEY" value="" />
                    </form>


                    <div class="modal-footer">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="login">
        <div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
            data-keyboard="false">
            <div class="modal-dialog mui-login">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="mui-login-top">
                            <span class="mui-mark">F</span>
                            <span class="mui-name">Flow</span>
                            <div class="mui-lang" role="group" aria-label="Language">
                                <button type="button" data-lang="ENG">ENG</button>
                                <button type="button" data-lang="ARB">AR</button>
                            </div>
                        </div>
                        <h1 class="mui-welcome" data-t="welcome">Welcome back</h1>
                        <p class="mui-intro" data-t="intro">Sign in to your workspace.</p>
                        <form class="form center-block" onsubmit="return false;">
                            <div class="form-group">
                                <label for="ACC" data-t="acc">Account No.</label>
                                <input id='ACC' type='text' class='form-control' placeholder='Account No.'>
                            </div>
                            <div class="form-group">
                                <label for="USRID" data-t="usr">User Name</label>
                                <input id="USRID" type="text" class="form-control" placeholder="User Name">
                            </div>
                            <div class="form-group">
                                <label for="PASS" data-t="pass">Password</label>
                                <div class="mui-pass">
                                    <input id="PASS" type="password" class="form-control" placeholder="Password">
                                    <button type="button" class="mui-eye" aria-label="Show password" aria-pressed="false"></button>
                                </div>
                            </div>
                            <div class="form-group" style="display:none">
                                <select class="form-control" id="LNG">
                                    <option value="ENG">English</option>
                                    <option value="ARB">Arabic</option>
                                </select>
                            </div>
                            <div class="form-group mui-remember">
                                <label class="mui-check" for="RMMBR"><input id="RMMBR" type="checkbox"><span data-t="remember">Remember me</span></label>
                            </div>
                            <label id="STS" role="status" aria-live="polite"></label>
                            <button class="btn btn-primary btn-block mui-signin" onclick="CMDCHK();" type="button" data-t="signin">Sign In</button>
                            <button id="FRGBTN" class="btn btn-link btn-block mui-linkbtn" onclick="FRGSND();" type="button" data-t="forgot">Forgot Password?</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="SYS" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-4"></div>
                        <div class="col-lg-4">
                            <img src="images/pleasewait.gif" />
                        </div>
                        <div class="col-lg-4"></div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4"></div>
                        <div class="col-lg-4">
                            <h4 id="MSG">Loading ... </h4>
                        </div>
                        <div class="col-lg-4"></div>
                    </div>




                </div>
            </div>
        </div>
    </div>

    <div id="CHGPASS" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
        data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button id="CHGPASS_Close" type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-picture"></span>Change
                        Password</h4>
                </div>

                <div class="modal-body">
                    <form class="form col-md-12 center-block">
                        <div class="form-group">
                            <input id='CPASS' type='password' class='form-control' placeholder='Current Password'>
                        </div>
                        <div class="form-group">
                            <input id="NPASS" type="password" class="form-control" placeholder="New Password">
                        </div>
                        <div class="form-group">
                            <input id="NPASS2" type="password" class="form-control" placeholder="ReEnter Password">
                        </div>
                        <div class="form-group">
                            <label id="STSPAS">Fill The Passwords</label>
                            <button class="btn btn-primary btn-block" onclick="CHGPSS();" type="button">Change
                                Password</button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div id="FRGMODAL" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog mui-login">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="mui-login-top">
                        <span class="mui-mark">F</span>
                        <span class="mui-name">Verification Code</span>
                    </div>
                    <form class="form center-block" onsubmit="return false;">
                        <div class="form-group">
                            <label>Enter the 6 digit code sent to your mail</label>
                            <div id="FRGOTP" class="mui-otp" dir="ltr">
                                <input type="text" inputmode="numeric" maxlength="1" autocomplete="one-time-code" aria-label="Digit 1">
                                <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2">
                                <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3">
                                <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4">
                                <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 5">
                                <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 6">
                            </div>
                            <input id="FRGCODE" type="hidden">
                        </div>
                        <label id="STSFRG" role="status" aria-live="polite"></label>
                        <button class="btn btn-primary btn-block mui-signin" onclick="FRGCHK();" type="button">Verify</button>
                        <button class="btn btn-link btn-block mui-linkbtn" onclick="FRGCANCEL();" type="button">Back to Sign In</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="FRGPASS" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog mui-login">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="mui-login-top">
                        <span class="mui-mark">F</span>
                        <span class="mui-name">Change Password</span>
                    </div>
                    <form class="form center-block" onsubmit="return false;">
                        <div class="form-group">
                            <input id="FRGNPASS" type="password" class="form-control" placeholder="New Password">
                        </div>
                        <div class="form-group">
                            <input id="FRGNPASS2" type="password" class="form-control" placeholder="ReEnter Password">
                        </div>
                        <label id="STSFRGP" role="status" aria-live="polite"></label>
                        <button class="btn btn-primary btn-block mui-signin" onclick="FRGRST();" type="button">Change Password</button>
                        <button class="btn btn-link btn-block mui-linkbtn" onclick="FRGCANCEL();" type="button">Back to Sign In</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="MYMSG" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
        data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button id="Button1" type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title" id="H1"><span class="glyphicon glyphicon-remove"></span> System Alert</h5>
                </div>

                <div class="modal-body">

                    <div class="row">
                        <div class="col-lg-1"></div>
                        <div class="col-lg-10">
                            <h4 id="MSGTXT">Loading ... </h4>
                        </div>
                        <div class="col-lg-1"></div>
                    </div>
                    <button id="MSGOK" class="btn btn-primary btn-block" data-dismiss="modal" type="button"
                        autofocus>OK</button>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>

    <div class="modal fade" id="EVNINF" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><i class=" glyphicon glyphicon-pencil"></i>Details</h4>

                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Privacy</label>
                                <select class="form-control" id="CLNTYP">
                                    <option value="A">Public</option>
                                    <option value="P">Personal</option>
                                </select>
                                <div id="GRP">

                                    <label>Group</label>
                                    <select class="form-control" id="GRPNO">
                                        <option value="-1">
                                            --Please select--
                                        <option>
                                    </select>
                                </div>
                                <label>Description</label>
                                <textarea class="form-control" rows="4" id="CLNDES"></textarea>
                                <div id="STATS">
                                    <label>Status</label>
                                    <select class="form-control" id="STATUS">
                                        <option value="A">Not Started</option>
                                        <option value="P">Pending</option>
                                        <option value="F">Finished</option>
                                    </select>
                                </div>
                                <input type="checkbox" id="TSK" />
                                Task
                                <br />
                                <div class="btn-group" id="savbtn">
                                    <br />
                                    <button type="button" class="btn btn-info" id="Button5"
                                        onclick="SAVEVN()">Save</button>
                                </div>
                                <div class="btn-group" id="Div1">
                                    <br />
                                    <button type="button" class="btn btn-info" id="Button3"
                                        onclick="DELEVN()">Delete</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">

                                <label>Date</label>
                                <input type="text" class="form-control" id="CLNDT" readonly />
                                <div id="STR">
                                    <div class="form-group">
                                        <label>Started Date</label>
                                        <input type="text" class="form-control" id="STRDT" readonly / value="2026-10-30" />
                                    </div>
                                </div>
                                <label>Start Time</label>
                                <div class="input-group">
                                    <input type="time" class="form-control" id="STRTM" /><span class="input-group-addon"
                                        id="basic-addon1"><i class="glyphicon glyphicon-time"></i></span>
                                </div>
                                <label>End Time</label>
                                <div class="input-group">
                                    <input type="time" class="form-control" id="ENDTM" /><span class="input-group-addon"
                                        id="Span1"><i class="glyphicon glyphicon-time"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>



    </div>
    <form id="form2">
        <div class="modal fade" id="DOCATH" role="dialog">
            <div class="modal-dialog modal-lg ">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Upload/Download Files</h4>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6 border-right">
                                <label>Upload File</label>
                                <br />
                                <div class="btn-group">
                                    <input type="file" class="form-control" id="files" name="files[]" multiple />
                                    <button type="button" class="btn btn-info" id="IMGUPL"
                                        onclick="UploadFiles();"><span
                                            class="glyphicon glyphicon-cloud-upload"></span>Upload</button>
                                </div>

                                <div class="div-table-content">
                                    <table class="table table-striped table-bordered" id="SLFIL">
                                        <thead>
                                            <tr>
                                                <th class="text-left">File Name</th>
                                                <th class="text-left">Size</th>
                                                <th class="text-left">Progress</th>
                                                <th class="text-left">Number</th>
                                                <th class="text-left">Remove</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>


                                </div>

                            </div>
                            <div class="col-md-6">
                                <label>Uploaded File</label>
                                <div class="div-table-content">
                                    <table class="table table-striped table-bordered" id="DTLFIL">
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="modal-footer">
                        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                    </div>
                </div>

            </div>
        </div>

    </form>
    <form id="form1">
        <div class="modal fade" id="JOBORD" role="dialog">
            <div class="modal-dialog modal-lg ">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"><i class=" glyphicon glyphicon-pencil"></i>Event Details</h4>

                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>DOCNO</label>
                                    <input type="text" class="form-control" id="DOCNO" readonly />

                                    <input type="hidden" id="SHPID" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Work Center</label>
                                    <input type="text" class="form-control" id="SHPNA" readonly />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Customer</label>
                                    <input type="text" class="form-control" id="CNAME" readonly />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <table id="DTL" class="table table-striped table-bordered">
                                    </table>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <input type="hidden" id="SD" value="" />
        <input type="hidden" id="SRCOPC" value="" />
        <input type="hidden" id="EMPNM" value="" />
        <input type="hidden" id="MTRSTS" value="" />
        <input type="hidden" id="TEL" value="" />
        <input type="hidden" id="EMPADD" value="" />
        <input type="hidden" id="EMPSEX" value="" />
        <input type="hidden" id="EMAIL" value="" />
        <input type="hidden" id="BRDT" value="" />
    </form>

    <input type="hidden" id="USRLOG" value="N" />
    <input type="hidden" id="APPCODE" value="1003" />
    <input type="hidden" id="CPAGE" value="" />
    <input type="hidden" id="CUSER" value="" />
    <input type="hidden" id="MCHID" value="" />
    <input type="hidden" id="CLNG" value='ENG' />
    <input type="hidden" id="FILEID" />
    <input type="hidden" id="SECID" />
    <input type="hidden" id="DOCID1" />
    <input type="hidden" id="CLNID" />
    <input type="hidden" id="IMGID" />
    <input type="hidden" id="THM" />
    <input type="hidden" id="HRNO" value="" />
    <input type="hidden" id="USRNA" value="" />
    <input type='file' id="ImpFile" accept=".xlsx,.xls" style="display: none;" />
    <div class="tooltip" role="tooltip">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-inner"></div>
    </div>
    <svg id="l"></svg>
    <!--Dashboards-->
    <form id="FRMRPTGEN">
        <div class="modal fade" id="RPTGEN" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
            data-keyboard="false">
            <div class="modal-dialog modal-lg">


                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"><i class=" glyphicon glyphicon-th-large"></i> Add to My Dashboard</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Report Title</label>
                                    <input type="text" class="form-control" id="RPTTIT" />
                                    <small class="text-muted">Saved to your own dashboard (<span id="DSHUSRLBL"></span>)</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Report Options</label>
                                <select class="form-control" id="TYP" onchange="$('#CHRTYPBOX').toggle(this.value=='C');$('#SHWBOX').toggle(this.value!='C');">
                                    <option value="R">Report</option>
                                    <option value="C">Chart</option>
                                </select>
                                <div id="CHRTYPBOX" style="display:none">
                                    <label id="CTL">Chart Type</label>
                                    <select class="form-control" id="CHRTYP">
                                        <option value="horizontalBar">Horizontal Bar</option>
                                        <option value="bar">Bar</option>
                                        <option value="line">Line</option>
                                        <option value="doughnut">Doughnut</option>
                                        <option value="pie">Pie</option>
                                        <option value="radar">Radar</option>
                                    </select>
                                    <label id="AXXL">X-Axis</label>
                                    <select class="form-control" id="AXX"></select>
                                    <label id="AXYL">Y-Axis</label>
                                    <select class="form-control" id="AXY"></select>
                                    <small class="text-muted" id="AXNOTE"></small>
                                </div>
                                <input type="hidden" id="OPT" />

                                <div id="SHWBOX">
                                    <label>Show Col.</label>
                                    <input type="text" class="form-control" id="SHWCOL" />
                                </div>
                                <input type="hidden" id="RPTNA" name="RPTNA" />
                            </div>
                        </div>
                        <fieldset class="scheduler-border">
                            <legend>Series </legend>
                            <div class="row" id="CLRS">
                                <div class="col-md-2">
                                    <label>S1</label>
                                    <input type="color" class="form-control" id="S1" value="#4DC8F5">
                                </div>
                                <div class="col-md-2">
                                    <label>S2</label>
                                    <input type="color" class="form-control" id="S2" value="#FFC300">
                                </div>
                                <div class="col-md-2">
                                    <label>S3</label>
                                    <input type="color" class="form-control" id="S3" value="#4C33A6">
                                </div>
                                <div class="col-md-2">
                                    <label>S4</label>
                                    <input type="color" class="form-control" id="S4" value="#C70039">
                                </div>
                                <div class="col-md-2">
                                    <label>S5</label>
                                    <input type="color" class="form-control" id="S5" value="#49A633">
                                </div>
                                <div class="col-md-2">
                                    <label>S6</label>
                                    <input type="color" class="form-control" id="S6" value="#000080">
                                </div>
                            </div>
                        </fieldset>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" id="SAVDSH" class="btn btn-info"
                            onclick="SAVRPTGEN();">Add to My Dashboard</button>
                    </div>
                </div>

            </div>
        </div>

    </form>
    <input type="hidden" id="APISRV" value='https://api2.mcbs-global.com' />
    <input type="hidden" id="LOGSRV" value='https://login.mcbs-global.com' />
    <input type="hidden" id="APIKEY" value="" />


    <!--Dashboards-->
</body>

</html>


<!-- Table Style -->

<!--<style>
       .tablescroll
{ font: 12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color:#fff; }

.tablescroll td, 
.tablescroll_wrapper,
.tablescroll_head,
.tablescroll_foot
{ border:1px solid #ccc; }

.tablescroll td
{ padding:3px 5px; }

.tablescroll_wrapper
{ border-left:0; }

.tablescroll_head
{ font-size:11px; font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-bottom:3px; }

.tablescroll thead td
{ border-right:0; border-bottom:0; }

.tablescroll tbody td
{ border-right:0; border-bottom:0; }

.tablescroll tbody tr.first td
{ border-top:0; }

.tablescroll_foot
{ font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-top:3px; }

.tablescroll tfoot td
{ border-right:0; border-bottom:0; }

.div-table-content {
  height:400px;
  overflow-y:auto;
 /*white-space: nowrap;*/
}
    </style>-->
<style>
    .border-right {
        border-right: 2px solid #ddd;
    }
</style>

<!--<a href="#"  data-toggle="collapse" data-target="#MS" style="color:#000000">message message message message message message</a>
  <div id="MS" class="collapse">
   message message message message message message
      message message message message message message
      message message message message message message
  </div>-->
<script type="text/javascript"
    src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>

    var TXTM = [];
    function pc() {
        //GETFILE($('#HIMG'), "FLOW", $('#CUSER').val(), "1", "1");
        $('#udes').text("Log out " + $('#USRNA').val());
    }
    $(window).load(function () {
        $('#loginModal').modal('show');
        $('[data-toggle="popover"]').popover();
        $('[data-toggle="tooltip"]').tooltip();
    });
    function DELMSG(r) {
        ASKCONFIRM("Are you sure!!", () => {
        var SL = "MSGDEL" + "," + r;
        EXECMD($('#form1'), SL, LDMYSG);
        });

    };
    $(document).ready(function () {
        // Disable right-click context menu
      /*   $(document).bind("contextmenu", function (e) {
            e.preventDefault();
        });
        
        // Block developer tools keyboard shortcuts
        $(document).keydown(function (e) {
            // F12 - Developer Tools
            if (e.keyCode == 123) {
                e.preventDefault();
                return false;
            }
            
            // Ctrl+Shift+I - Developer Tools
            if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
                e.preventDefault();
                return false;
            }
            
            // Ctrl+Shift+J - Console
            if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
                e.preventDefault();
                return false;
            }
            
            // Ctrl+Shift+C - Inspect Element
            if (e.ctrlKey && e.shiftKey && e.keyCode == 67) {
                e.preventDefault();
                return false;
            }
            
            // Ctrl+U - View Source
            if (e.ctrlKey && e.keyCode == 85) {
                e.preventDefault();
                return false;
            }
        }); */
        
        function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object
            $("#SLFIL > tbody").html("");
            var ID = 1;
            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                //if (!f.type.match('image.*')) {
                //    continue;
                //}

                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function (theFile) {
                    return function (e) {
                        // Render thumbnail.
                        var span = document.createElement('span');
                        var T = "<tr>";
                        T += "<input type='hidden' id='data' value='" + e.target.result + "' />";
                        T += "<td>" + theFile.name + "</td>";
                        T += "<td>" + theFile.size + "</td>";
                        T += "<td><div class='progress' id='PRG'><div id='bar' class='progress-bar progress-bar-info' role='progressbar'></div ><div class='percent'>0%</div ></div></td>";
                        T += "<td>" + ID + "</td>";
                        T += "<td>" + "<button type='button' onclick='CDLT_Click(this);' class='btn btn-default' style='text-align:left;'><span class='glyphicon glyphicon-floppy-remove'></span></button>";
                        T += "</tr>";
                        $("#SLFIL > tbody").append(T);
                        ID++;
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
        $("#DTLFIL").on("dblclick", "td", function (event) {

            $('#IMGID').val($(this).closest('tr').find('td:eq(0)').text());

            DownloadFile();
        });
        //  alert($('#HRNO').val());
        //    //    //GETREQ;        
        //
        $("#footer").load("../src/COMMON/footer.html");
        var frm = window.location.hash.substr(1);
        if (frm != "") {
            SHOWPAGE(frm);
        }
        if (typeof (Storage) !== "undefined") {
            if (localStorage.USRID) {
                $('#USRID').val(localStorage.USRID);
                $('#ACC').val(localStorage.ACCNO);
                $('#PASS').val(localStorage.PASS);
                $('#LNG').val(localStorage.LANG);
                $('#RMMBR').prop('checked', true);
                CMDCHK();
            }

        }
        ;
        $('#STR').hide();
        $('#GRP').hide();
        $('#DTLTMP').hide();
        $('#DTLTMP').empty();
        var events = [];
        var i = 0;
        $("#LNG").change(function () {
            if ($("#LNG").val() == "ENG") {
                $('#HEADERHome').text("Home");
                $('#HEADERNew').text("New");
                $('#HEADERSave').text("Save");
                $('#HEADERHold').text("Hold");
                $('#HEADERDelete').text("Delete");
                $('#HEADERAttach').text("Attach");
                $('#HEADERImport').text("Import");
                $('#HEADERExport').text("Export");
                $('#HEADERRefresh').text("Refresh");
                $('#HEADERPrint').text("Print");
                $('#HEADERUser').text("User");
                $('#HEADERHelp').text("Help");
                $('#HEADERContactUs').text("Contact Us");
                $('#HEADERReport').text("Report a problem");
                $('#HEADERMessage').text("Message");
                $('#HEADERPassword').text("Change Password");
                $('#HEADERLocalStorage').text("Clear Local Storage");
                $('#HEADERLogout').text("Log out");

            }
            else {
                $('#HEADERHome').text("الرئيسية");
                $('#HEADERNew').text("جديد");
                $('#HEADERSave').text("حفظ");
                $('#HEADERHold').text("ايقاف");
                $('#HEADERDelete').text("حذف");
                $('#HEADERAttach').text("ملحقات");
                $('#HEADERImport').text("استيراد");
                $('#HEADERExport').text("تصدير");
                $('#HEADERRefresh').text("تحديث");
                $('#HEADERPrint').text("طباعة");
                $('#HEADERUser').text("المستخدم");
                $('#HEADERHelp').text("مساعدة");
                $('#HEADERContactUs').text("اتصل بنا");
                $('#HEADERReport').text("الابلاغ عن مشكله");
                $('#HEADERMessage').text("رساله");
                $('#HEADERPassword').text("تغيير كلمه السر");
                $('#HEADERLocalStorage').text("مسح التخزين المحلي");
                $('#HEADERLogout').text("الخروج");
            }
        });
        //functuions to import
        $("#ImpFile").change(function () {
            //readImpFile(this);

            var reader = new FileReader();
            //onload if it read the file successfully(onload) and if there is an error (onerror) 
            reader.onload = function () {

                var arrayBuffer = this.result,
                    array = new Uint8Array(arrayBuffer),
                    binaryString = String.fromCharCode.apply(null, array);
                /// Call XLSX 
                var workbook = XLSX.read(binaryString, {
                    type: "binary",
                    cellDates: true
                });
                /// the above options are used to change the format of the date 

                ///we can loop over the sheets 
                /// for(sheets of workbook.SheetNames){}

                var first_sheet_name = workbook.SheetNames[0];

                var workSheet = workbook.Sheets[first_sheet_name];

                var excellObj = XLSX.utils.sheet_to_json(workSheet, {
                    dateNF: 'yyyy-mm-dd',
                    header: 1,
                    blankrows: false,
                });
                console.log(excellObj);
                const newArr = excellObj.filter(object => {
                    return object.length !== 1;
                });
                convert(newArr);
                //console.log(excellObj[0]["date"]);
            }
            reader.readAsArrayBuffer(this.files[0]);
        });

        //$('#HRNO').change(function () {
        //    $('#EMPNO').val($('#HRNO').val());

        //    $('#EMPNO').trigger("change");
        //});

        //$("#SS").click(function () {
        //    setTimeout(function () {
        //        alert($('#EMPNO').val());
        //      //  $('#EMPNO').trigger("change");
        //    }, 1000);
        //   // $('#HRNO').trigger("change");

        //});
        if (localStorage.getItem('FLWMNU')) {
            Mnu = localStorage.getItem('FLWMNU');
            Mnu = JSON.parse(Mnu);
            let input = localStorage.getItem('FLWCPT');
            input = JSON.parse(input);
            SearchFlow(input)
        }
        if ($('#USRLOG').val() == "Y") {
            GETUSR();
            GETCAL();
            LDMYSG();
        }
        $('#CUSER').change(function () {
            if ($('#USRLOG').val() == "Y") {
                GETUSR();
            }
        });
        $('#CLNTYP').change(function () {

            if ($('#CLNTYP').val() == 'G') {
                $('#GRP').show();
            }
            else {
                $('#GRP').hide();
            }
        });
        $('[data-toggle="tooltip"]').tooltip({
            placement: 'top'
        });
        function readImpFile(input) {
            if (input.files[0].size > 3000000) {
                alert("File Is too Large");
                return;
            }
            if (input.files && input.files[0]) {
                var FR = new FileReader();
                FR.onload = function (e) {
                    $('#IMPTXT').val(e.target.result);
                };
                FR.readAsText(input.files[0]);
            }
        };
        $("#login").keydown(function (event) {
            if (event.keyCode == 13) {
                CMDCHK();
            }
        });


    });

    function send() {
        var SL;
        SL = "MSGSND,";
        SL += "USR=" + $('#USR').val() + String.fromCharCode(11);
        SL += "MSG=" + $('#TMSG').val() + String.fromCharCode(11);
        SL += String.fromCharCode(15);
        EXECMD($('#form1'), SL);
        $("#USR").val("");
        $("#TMSG").val("");
        return;
    }
    function LDMYSG() {
        var SL = "RPTNA=MYMSG" + String.fromCharCode(11)
        GENTBL(SL, $('#USRMSG'), $('#USRMSG'), SETMC);
        // fill the news bar			 
    }
    function SETMC() {
        var i = 0;
        $("tr", "#USRMSG tbody").each(function (index, elem) {
            i++;
        });
        $('#MC').text(i);
    }
    function CMDCHK() {
        var ACCNO = " ";
        if ($('#ACC').length) {
            if ($('#ACC').val() == '') { STS.textContent = 'Please Enter Your Account Number'; return; } else { ACCNO = $('#ACC').val() }
        }
        if ($('#USRID').val() == "") {
            STS.textContent = "Please Enter Your User ID";
            $('#USRID').focus();
            return;
        }
        if ($('#PASS').val() == "") {
            STS.textContent = "Please Enter Your Password";
            $('#PASS').focus();
            return;
        }
        if (typeof (Storage) !== "undefined") {
            localStorage.LANG = $('#LNG').val();
        }
        if (document.getElementById("RMMBR").checked) {
            if (typeof (Storage) !== "undefined") {
                localStorage.USRID = $('#USRID').val();
                localStorage.PASS = $('#PASS').val();
                localStorage.ACCNO = $('#ACC').val();
            }
        }
        else {
            localStorage.USRID = "";
        }

        CHKUSR(ACCNO, $('#USRID').val(), $('#PASS').val(), $('#LNG').val(), GETCAL);

        $('#CLNG').val($('#LNG').val());
        MSGTXT = "Connecting Please Wait ..";

        if ($('#CLNG').val() == "ARB") {
            $("body").css("font-size", "16px");
            MSGTXT = "جارى الاتصال .. يرجى الانتظار";
        }
        STS.textContent = MSGTXT;

    };

    function CHGPSS() {
        if ($('#CPASS').val() == "") {
            STSPAS.textContent = "Enter Current Password";
            return;
        }
        if ($('#NPASS').val() == "") {
            STSPAS.textContent = "Enter New Password";
            return;
        }
        if ($('#NPASS2').val() == "") {
            STSPAS.textContent = "Re-Enter New Password";
            return;
        }
        if ($('#NPASS').val() != $('#NPASS2').val()) {
            STSPAS.textContent = "New Password Dosn't Match";
            return;
        }
        if ($('#NPASS').val().length < 6) {
            STSPAS.textContent = "Password Must be 6 characters at least";
            return;
        }
        var CHKNUM = false;
        var CHKCHR = false;
        var PSS = $('#NPASS').val();
        while (PSS.length > 0) {
            var r = PSS.substring(0, 1);
            PSS = PSS.substring(1);
            if (IsNumeric(r)) {
                CHKNUM = true;
            }
            else {
                CHKCHR = true;
            }
        }
        if (!CHKCHR) {
            STSPAS.textContent = "New Password Must contain both digits and characters";
            return;
        }
        if (!CHKNUM) {
            STSPAS.textContent = "New Password Must contain both digits and characters";
            return;
        }
        CHGPAS($('#PASS').val(), $('#NPASS').val());
    };
    function SHOWCHG() {
        $('#CHGPASS').modal('show');
    };
    function CLRLOCSTR() {
        localStorage.clear();
        LOGOUT();
    };
    function CHGTHM(THEME) {
        if ($('#USRID').val() != "") {
            localStorage.USR = $('#USRID').val();
        } else {
            localStorage.USR = $('#CUSER').val();
        }
        $('#THM').val(THEME);
        localStorage.THEME = "bootstrap-3.3.2-dist/css/" + THEME + ".css";
        $("#theme").attr("href", "bootstrap-3.3.2-dist/css/" + THEME + ".css");
    }

    function SHOWPAGE(PAGE) {
        LDPAGE(PAGE, $('#FLOW'));
        // GETFILE($('#HIMG'), "FLOW", $('#CUSER').val(), "1", "1");
    }
    //function SHOWPIC() {

    //    GETFILE($('#HIMG'), "FLOW", $('#CUSER').val(), "1", "1");
    //}
    function showMnu() {
        $("#LFT-MNU").toggle();
        if (document.getElementById('FLW-COL').className == "col-sm-10") {
            document.getElementById('FLW-COL').className = "col-sm-12";
        }
        else {
            document.getElementById('FLW-COL').className = "col-sm-10";
        }
    }
    function OrignalDate() {
        $('#STRDT').val($('#SD').val());
    }
    function GSTRDT() {
        SL = "SELECT CLNDT AS 'SD' FROM CLNDTL WHERE TSK='Y' AND  CLNID=" + $('#CLNID').val();
        GETREC($("#form1"), SL, OrignalDate);
    }
    function GETCNAME() {
        SL = "SELECT CNAME,SHPID FROM JOBHDR WHERE DOCNO=" + $('#DOCNO').val();

        GETREC($("#form1"), SL, GETSHP);
    }
    function GETSHP() {
        SL = "SELECT SHPNA FROM JOBSHOP WHERE SHPID=" + $('#SHPID').val();
        GETREC($("#form1"), SL);
    }
    function EMPTYCLN() {
        $('#SRCOPC').val("");
        $('#CLNID').val("");
        $('#CLNDT').val("");
        $('#STRTM').val("");
        $('#ENDTM').val("");
        $('#CLNDES').val("");
        $('#CLNID').val("");
        $('#STATUS').val("A");
    }
    function GETCAL() {
        CHKMYDSH();
        // login finished: load this user's notifications and fire the unread ones in the browser (no timer)
        if (window.FlowNotify) { window.FlowNotify.onLogin(); }
        if (window.FlowChangelog) { window.FlowChangelog.onLogin(); }
        // fill the news bar
        FillNews();
        SL = "RPTNA=GETCLNDTL" + String.fromCharCode(11);
        SL += ReadForm($('#form1'));
        while (SL.indexOf(";") > -1) {
            SL = SL.replace(";", String.fromCharCode(11));
        }
        SL += String.fromCharCode(11);
        GENTBL(SL, $('#DTLTMP'), $('#DTLTMP'), GETINFO);
        if (localStorage.LANG == "ARB") {
            $("body").css("font-size", "16px");
        }
        SL = "SELECT GRPNO,GRPNA FROM CONGRP WHERE CCODE = 'USR'";
        FillCombo($("#GRPNO"), SL);
    }
    // After login: if this user has saved dashboard reports, open GLDSH (My Dashboard) instead of Home.
    // Runs one lightweight existence query, once per user per page session; GLDSH does the real loading.
    function CHKMYDSH() {
        var U = GETDSHUSR();
        if (U == "" || window.MYDSHCHK === U) {
            return;
        }
        window.MYDSHCHK = U;
        console.log('CHKMYDSH: checking dashboard for', U);
        DSHQRY("SELECT * FROM DSHCNF WHERE USRID='" + DSHSQ(U) + "'", function (data) {
            console.log('CHKMYDSH: rows found =', data && data.length);
            if (!data || !data.length || GETDSHUSR() != U) {
                return;
            }
            window.MYDSHHAS = true; // Home now opens the dashboard with the module icons under it
            // the login/home screen keeps drawing after login, so retry a few times until GLDSH is really shown
            var tries = 0;
            (function openDsh() {
                if ($('#GLDSH').hasClass('active')) {
                    return;
                }
                var cur = $('.tab-content > .tab-pane.active').attr('id');
                if (tries > 0 && cur && cur != 'home') {
                    return; // the user already went somewhere else
                }
                if (typeof window.openHomeDashboard == 'function') {
                    window.openHomeDashboard();
                } else if (typeof window.openMyDashboard == 'function') {
                    window.openMyDashboard();
                } else {
                    var tab = document.querySelector('a[href="#GLDSH"][data-toggle="tab"]');
                    if (tab) { tab.click(); }
                }
                if (++tries < 5) {
                    setTimeout(openDsh, 900);
                }
            })();
        }, function (msg) {
            window.MYDSHCHK = '';
            console.log('CHKMYDSH failed', msg && msg.status, msg && msg.responseText);
        });
    }
    function GETUSR() {
        //GETFILE($('#IMG'), "FLOW", $('#USRID').val(), "1", "1");
        //GETFILE($('#HIMG'), "FLOW", $('#USRID').val(), "1", "1");
        $('#UID').val($('#CUSER').val());
        $('#UNAME').val($('#USRNA').val());
        $('#udes').text("Log out " + $('#USRNA').val());
        if (IsValue($('#HRNO'))) {

            //$('#RQEMPNO').val($('#HRNO').val());
            //$('#RQEMPNO').trigger('change');
            SL = "select EMPNM,TEL,EMPADD,EMPSEX,EMAIL,BRDT,MTRSTS from EMPMAS WHERE EMPNO=" + $('#HRNO').val();
            GETREC($("#form1"), SL, GETEMP);

        }
        //$('#header').load('../src/header-m.html', pc);
        $("#footer").load("../src/COMMON/footer.html");
        $('#udes').text("Log out " + $('#USRNA').val());
    }
    function GETEMP() {

        $('#EMPNAM').val($('#EMPNM').val());
        $('#TEL1').val($('#TEL').val());
        $('#ADD').val($('#EMPADD').val());
        $('#SEX').val($('#EMPSEX').val());
        $('#EML').val($('#EMAIL').val());
        $('#BRDATE').val($('#BRDT').val());
        $('#MTRSTATUS').val($('#MTRSTS').val());
    }
    function SAVEVN() {
        var SL = "CLNCMD,SAVCLN,";
        SL += ZIPDOC();
        EXECMD($('#form1'), SL, GETCLN);
    }
    function DELEVN() {
        var SL = "CLNCMD,DELCLN,";
        SL += ZIPDOC();
        EXECMD($('#form1'), SL, GETCLN2);
    }
    function ZIPDOC() {
        var SL;
        SL = "CLNID=" + $('#CLNID').val() + String.fromCharCode(11);
        SL += "CLNDES=" + $('#CLNDES').val() + String.fromCharCode(11);
        SL += "CLNDT=" + $('#CLNDT').val() + String.fromCharCode(11);
        SL += "STRTM=" + $('#STRTM').val() + String.fromCharCode(11);
        SL += "ENDTM=" + $('#ENDTM').val() + String.fromCharCode(11);
        SL += "CLNTYP=" + $('#CLNTYP').val() + String.fromCharCode(11);
        SL += "SRCOPC=" + $('#SRCOPC').val() + String.fromCharCode(11);
        SL += "STS=" + $('#STATUS').val() + String.fromCharCode(11);
        // reminder (minutes before the start, -1 = none) is saved with the event in the database
        SL += "RMNMIN=" + (typeof window.MUIReminderMin == 'function' ? window.MUIReminderMin() : -1) + String.fromCharCode(11);
        if (document.getElementById("TSK").checked) {
            SL += "TSK=Y" + String.fromCharCode(11);

        }
        SL += String.fromCharCode(15);
        return SL;
    };
    function GCLN() {

        $('#EVNINF').modal('hide');
        SL = "RPTNA=GETCLNDTL" + String.fromCharCode(11);
        SL += ReadForm($('#form1'));
        while (SL.indexOf(";") > -1) {
            SL = SL.replace(";", String.fromCharCode(11));
        }
        SL += String.fromCharCode(11);
        GENTBL(SL, $('#DTLTMP'), $('#DTLTMP'), GETINFO);
    }
    function GETCLN(data) {
        EMPTYCLN();
        MSGBOX("Data has been saved succefully");
        GCLN();
    }
    function GETCLN2(data) {
        EMPTYCLN();
        MSGBOX("Data has been deleted");
        GCLN();
    }

    function SHWCLN() {
        GETCAL();
    }
    function GETINFO() {
        document.getElementById("cc").innerHTML = '&nbsp;';
        document.getElementById("cc").innerHTML = '<div id="CALModal"></div>';
        $('#CALModal').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            //navLinks: true, // can click day/week names to navigate views
            //editable: true,
            //eventLimit: true, // allow "more" link when too many events
            editable: true,
            eventLimit: 4,
            eventRender: function (event, element) {

                element.bind('click', function () { // one click opens the saved event with its data (was double click)
                    EMPTYCLN();
                    $('#STATS').show();
                    var info = event.id.split(String.fromCharCode(11));
                    if (info[6] == "JOBORD") {
                        SL = "SELECT DOCNO FROM JOBDTL WHERE CLNID=" + info[0];
                        GETREC($("#form1"), SL, GETCNAME);
                        SL = "SELECT JOBDES AS 'Problems' FROM JOBDTL WHERE CLNID=" + info[0];
                        LDTBL(SL, $('#DTL'), $('#DTL'));
                        $('#JOBORD').modal('toggle');
                    }
                    else {
                        $('#CLNID').val(info[0]);
                        GSTRDT();
                        $('#CLNDT').val(info[1]);
                        $('#STRTM').val(info[2]);
                        $('#ENDTM').val(info[3]);
                        $('#CLNDES').val(info[5]);
                        $('#STATUS').val(info[7]);
                        if (info[8] == "Y") {
                            $('#STR').show();
                            $('#TSK').prop('checked', true);
                        } else {
                            $('#STR').hide();
                            $('#TSK').prop('checked', false);
                        }
                        if (info[4] == "Public") {
                            $('#CLNGRP').val("A"); $('#CLNTYP').val("A");
                        }
                        else if (info[4] == "Personal") {
                            $('#CLNGRP').val("P"); $('#CLNTYP').val("P");
                        }
                        else if (info[4] == "Group") {
                            $('#CLNGRP').val("G"); $('#CLNTYP').val("P"); // groups are no longer offered: an old group event becomes personal
                        }
                        else {
                            $('#CLNGRP').val("");
                        }
                        $('#EVNINF').modal('toggle');
                    }

                });
            },
            eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                var info = event.id.split(String.fromCharCode(11));
                if (info[6] == "JOBORD") {
                    MSGBOX("JOBORD Cannot be updated");
                    revertFunc();
                    return;
                }
                ASKCONFIRM("Are you sure about this change?", () => {
                    EMPTYCLN();
                    var info = event.id.split(String.fromCharCode(11));

                    $('#CLNID').val(info[0]);
                    date = new Date(event.start);
                    var dt = (date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2)).toString();
                    $('#CLNDT').val(dt);
                    $('#STRTM').val(info[2]);
                    $('#ENDTM').val(info[3]);
                    $('#CLNDES').val(info[5]);
                    $('#SRCOPC').val(info[6]);
                    if (info[8] == "Y") {
                        $('#TSK').prop('checked', true);
                        $('#STR').show();
                    } else {
                        $('#STR').hide();
                        $('#TSK').prop('checked', false);
                    }
                    $('#SRCOPC').val(info[8]);
                    if (info[4] == "Public") {
                        $('#CLNGRP').val("A"); $('#CLNTYP').val("A");
                    }
                    else if (info[4] == "Personal") {
                        $('#CLNGRP').val("P"); $('#CLNTYP').val("P");
                    }
                    else if (info[4] == "Group") {
                        $('#CLNGRP').val("G"); $('#CLNTYP').val("P"); // groups are no longer offered: an old group event becomes personal
                    }
                    else {
                        $('#CLNGRP').val("");
                    }
                    SAVEVN();
                }, () => {
                    revertFunc();
                });
            },
            //dayRender: function (date, element, view) {
            //    element.bind('dblclick', function () {
            //        EMPTYCLN();
            //        $('#STATS').hide();
            //        $('#EVNINF').modal('toggle');
            //        date = new Date(date);
            //        var dt = (date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2)).toString();
            //        $('#CLNDT').val(dt);
            //    });
            //}
            dayClick: function (date, jsEvent, view) {
                EMPTYCLN();
                $('#STATS').hide();
                $('#EVNINF').modal('toggle');
                date = new Date(date);
                var dt = (date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2)).toString();
                $('#CLNDT').val(dt);
                //GSTRDT();
            }
        });
        $("tr", "#DTLTMP tbody").each(function (index, elem) {
            if (elem.cells[9].textContent == "Y") {
                d = new Date(elem.cells[1].textContent);
                c = new Date();
                if (d.getTime() < c.getTime()) {
                    elem.cells[1].textContent = new Date().toISOString().slice(0, 10);
                }
                //$('#STRDT').val(elem.cells[1].textContent);
            }
            strtm = elem.cells[1].textContent + " " + elem.cells[2].textContent;
            strtm = new Date(strtm);
            endtm = elem.cells[1].textContent + " " + elem.cells[3].textContent;
            endtm = new Date(endtm);

            var sd = strtm.getDate();
            var sm = strtm.getMonth();
            var sy = strtm.getFullYear();
            var sh = strtm.getHours();
            var smns = strtm.getMinutes();

            var ed = endtm.getDate();
            var em = endtm.getMonth();
            var ey = endtm.getFullYear();
            var eh = endtm.getHours();
            var emns = endtm.getMinutes();

            var ids = elem.cells[0].textContent + String.fromCharCode(11) + elem.cells[1].textContent + String.fromCharCode(11);
            ids += elem.cells[2].textContent + String.fromCharCode(11) + elem.cells[3].textContent + String.fromCharCode(11) + elem.cells[5].textContent;
            ids += String.fromCharCode(11) + elem.cells[4].textContent + String.fromCharCode(11) + elem.cells[7].textContent + String.fromCharCode(11);
            ids += elem.cells[8].textContent + String.fromCharCode(11) + elem.cells[9].textContent;
            var titles = "ID : " + elem.cells[0].textContent;
            if (elem.cells[4].textContent != "" && elem.cells[4].textContent != null) {
                titles += "\n" + elem.cells[4].textContent;
            }

            // element.css('border', '1px solid #faebcc');
            txtcolor = '#8a6d3b';
            bckgrndcolor = '#fcf8e3';
            border = '#faebcc';
            if (elem.cells[8].textContent == "F") {
                txtcolor = '#3c763d';
                bckgrndcolor = '#dff0d8';
                border = '#d6e9c6';
            }
            else if (elem.cells[8].textContent == "P") {
                txtcolor = '#31708f';
                bckgrndcolor = '#d9edf7';
                border = '#bce8f1';
            }
            if (elem.cells[9].textContent == "Y") {

                txtcolor = '#31708f';
                bckgrndcolor = '#d9edf7';
                border = '#bce8f1';
                if (elem.cells[8].textContent == "F") {
                    txtcolor = '#3c763d';
                    bckgrndcolor = '#dff0d8';
                    border = '#d6e9c6';
                }
                else if (elem.cells[8].textContent == "P") {
                    txtcolor = '#a94442';
                    bckgrndcolor = '#f2dede';
                    border = '#ebccd1';
                }
            }
            $('#CALModal').fullCalendar('renderEvent',
                {
                    id: ids,
                    title: titles,
                    start: new Date(sy, sm, sd, sh, smns),
                    end: new Date(ey, em, ed, eh, emns),
                    allDay: false,
                    textColor: txtcolor,
                    backgroundColor: bckgrndcolor,
                    borderColor: border,
                },
                true // make the event "stick"
            );
        });
    }
    $('.modal').on('shown.bs.modal', function () {
        $(this).find('[autofocus]').focus();
    });
    function UPL() {
        UPLIMG('USRIMG', "FLOW", $('#CUSER').val(), "1", "1");
    }
    function OPN() {
        $("#asd").trigger('click');
    }
    function SelectFile() {
        $('#ImpFile').val('');
        $('#ImpFile').trigger('click');
    }
    function GETTEMPLATE() {
        var $idown;  // Keep it outside of the function, so it's initialized once.        
        var SL = "https://www.microsystems-eg.com/org/" + $('#IMP_MASNA').val() + ".xlsx";
        if ($idown) {
            $idown.attr('src', SL);
        } else {
            $idown = $('<iframe>', { id: 'idown', src: SL }).hide().appendTo('body');
        }
    }

    $("#asd").change(function () {
        ReadImg(this, $('#USRIMG'));
    });
    // Column names of the report on screen: from the chart data CHART() keeps, or the report table headers.
    // The position in this list is the column index (same convention as SHWCOL).
    function DSHT(en, ar) {
        return $('#CLNG').val() == 'ARB' ? ar : en;
    }
    function DSHCOLS() {
        var names = [];
        var $sel = $('#FLOW select[id^="SL"]').filter(function () {
            return $(this).find('option[value="horizontalBar"]').length > 0;
        }).first();
        if ($sel.length) {
            try {
                var d = JSON.parse($('#Data' + $sel.attr('id').substring(2)).val() || '[]');
                if (d && d.length) { return Object.keys(d[0]); }
            } catch (e) { }
        }
        var tab = document.getElementById('DTL');
        if (tab && $.fn.DataTable.isDataTable(tab)) {
            try {
                $.each($('#DTL').DataTable().columns().header().toArray(), function (i, h) {
                    names.push($.trim($(h).text()));
                });
            } catch (e) { names = []; }
        }
        return names;
    }
    $('#RPTGEN').on('show.bs.modal', function (e) {
        var skillsSelect = document.getElementById("RPTNA");
        var selectedText;
        if (skillsSelect.options != null && skillsSelect.options.length > 0) {
            selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
        } else {
            selectedText = skillsSelect.value;
        }
        $("#RPTTIT").val(selectedText);
        $("#DSHUSRLBL").text(GETDSHUSR());
        $("#FRMRPTGEN [name=RPTNA]").val(skillsSelect.value);
        var SL1 = ReadForm($('#form1'));
        while (SL1.indexOf(String.fromCharCode(11)) > -1) {
            SL1 = SL1.replace(String.fromCharCode(11), ";");
        }
        $('#OPT').val(SL1);
        var x = '';
        var tab = document.getElementById('DTL'); // id of table
        if (tab && $.fn.DataTable.isDataTable(tab)) {
            try {
                // use this table's own columns (the legacy dataTableSettings[0] can be a different table)
                $('#DTL').DataTable().columns().every(function (i) {
                    if (this.visible() === true) {
                        x += (x == '' ? '' : ',') + '[' + i + ']';
                    }
                });
            } catch (ex) {
                x = '';
                if (window.console) { console.log('SHWCOL not read', ex); }
            }
        }
        $("#SHWCOL").val(x);
        // chart reports: preselect the chart type currently shown on the page (CHART() keeps it in select#SL<id>)
        var $pageChart = $('#FLOW select[id^="SL"]').filter(function () {
            return $(this).find('option[value="horizontalBar"]').length > 0;
        }).first();
        if ($pageChart.length) {
            $('#TYP').val('C');
            $('#CHRTYP').val($pageChart.val() || 'bar');
        } else {
            $('#TYP').val('R');
            $('#CHRTYP').val('bar');
        }
        $('#CHRTYPBOX').toggle($('#TYP').val() == 'C');
        $('#SHWBOX').toggle($('#TYP').val() != 'C');
        // X-Axis / Y-Axis choices come from the report's real columns
        var cols = DSHCOLS();
        $('#CTL').text(DSHT('Chart Type', 'نوع الرسم'));
        $('#AXXL').text(DSHT('X-Axis', 'المحور السيني (X)'));
        $('#AXYL').text(DSHT('Y-Axis', 'المحور الصادي (Y)'));
        var opts = '<option value="">' + DSHT('Select column', 'اختر عمودًا') + '</option>';
        $.each(cols, function (i, n) { opts += '<option value="' + i + '">' + $('<div></div>').text(n).html() + '</option>'; });
        $('#AXX, #AXY').html(opts);
        $('#AXNOTE').text(cols.length > 1
            ? DSHT('Choose exactly two different columns: first = X-Axis, second = Y-Axis.', 'اختر عمودين مختلفين: الأول X والثاني Y.')
            : DSHT('Run the report first, then choose the X-Axis and Y-Axis columns.', 'قم بتشغيل التقرير أولاً ثم اختر عمودي X و Y.'));
        // report already on my dashboard as a chart: restore its type and X / Y columns
        var DU = GETDSHUSR(), DR = skillsSelect.value;
        if (DU != '' && DR) {
            DSHQRY("SELECT TYP,CHRTYP,SHWCOL FROM DSHCNF WHERE USRID='" + DSHSQ(DU) + "' AND RPTNA='" + DSHSQ(DR) + "'", function (d) {
                if (!d || !d.length) { return; }
                var sv = {};
                $.each(d[0], function (k, v) { sv[k.toUpperCase()] = v; });
                if (sv.TYP != 'C') { return; }
                $('#TYP').val('C');
                $('#CHRTYPBOX').show();
                $('#SHWBOX').hide();
                if (sv.CHRTYP) { $('#CHRTYP').val(sv.CHRTYP); }
                var m = String(sv.SHWCOL || '').match(/\[(\d+)\]/g) || [];
                if (m.length == 2) {
                    $('#AXX').val(m[0].replace(/\D/g, ''));
                    $('#AXY').val(m[1].replace(/\D/g, ''));
                }
            });
        }
    });
    // Saves the current report to the logged-in user's own dashboard. Key = USRID + RPTNA.
    // An existing USRID + RPTNA row is updated by SAVMAS, a new one is inserted - never duplicated.
    function SAVRPTGEN() {
        var USR = GETDSHUSR();
        if (USR == "") {
            MSGBOX('Please login first');
            return;
        }
        var RPT = $("#FRMRPTGEN [name=RPTNA]").val();
        if (!RPT) {
            MSGBOX('Select Report');
            return;
        }
        if (!IsValue($("#RPTTIT"))) {
            MSGBOX('Enter Report Title');
            return;
        }
        var TYP = $('#TYP').val();
        var SHW = $('#SHWCOL').val();
        if (TYP == 'C') {
            // chart: exactly two different columns, index 0 = X-Axis, index 1 = Y-Axis (saved like SHWCOL: [x],[y])
            var AX = $('#AXX').val(), AY = $('#AXY').val();
            if ($('#AXX option').length < 3) {
                MSGBOX(DSHT('Run the report first (it needs at least two columns), then choose the X-Axis and Y-Axis columns', 'قم بتشغيل التقرير أولاً (يلزم عمودان على الأقل) ثم اختر عمودي X و Y'));
                return;
            }
            if (!AX || !AY) {
                MSGBOX(DSHT('Select both the X-Axis and the Y-Axis column', 'اختر عمود المحور X وعمود المحور Y'));
                return;
            }
            if (AX == AY) {
                MSGBOX(DSHT('X-Axis and Y-Axis must be different columns', 'يجب أن يكون عمودا X و Y مختلفين'));
                return;
            }
            SHW = '[' + AX + '],[' + AY + ']';
        }
        var F = {
            USRID: USR,
            RPTNA: RPT,
            RPTTIT: $('#RPTTIT').val(),
            TYP: TYP,
            SHWCOL: SHW,
            OPT: $('#OPT').val(),
            CHRTYP: TYP == 'C' ? $('#CHRTYP').val() : '',
            S1: $('#S1').val(),
            S2: $('#S2').val(),
            S3: $('#S3').val(),
            S4: $('#S4').val(),
            S5: $('#S5').val(),
            S6: $('#S6').val()
        };
        $('#RPTGEN').modal('hide');
        // server adds the row, or updates it when this user already has the report (key USRID + RPTNA)
        APICMD("SRVCMD/SAVDSH", JSON.stringify(F), function () {
            MSGBOX("Report added to your dashboard");
        });
    };

    $(document).ready(function () {
        $('#accordion a').click(function () {
            $('#accordion a').removeClass('focus');
            $(this).addClass('focus');

        });
    });
    function eToNumber(num) {
        let sign = "";
        (num += "").charAt(0) == "-" && (num = num.substring(1), sign = "-");
        let arr = num.split(/[e]/ig);
        if (arr.length < 2) return sign + num;
        let dot = (.1).toLocaleString().substr(1, 1), n = arr[0], exp = +arr[1],
            w = (n = n.replace(/^0+/, '')).replace(dot, ''),
            pos = n.split(dot)[1] ? n.indexOf(dot) + exp : w.length + exp,
            L = pos - w.length, s = "" + BigInt(w);
        w = exp >= 0 ? (L >= 0 ? s + "0".repeat(L) : r()) : (pos <= 0 ? "0" + dot + "0".repeat(Math.abs(pos)) + s : r());
        L = w.split(dot); if (L[0] == 0 && L[1] == 0 || (+w == 0 && +s == 0)) w = 0; //** added 9/10/2021
        return sign + w;
        function r() { return w.replace(new RegExp(`^(.{${pos}})(.)`), `$1${dot}$2`) }
    }
    //function to change the format of date
    function formatDate(date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2)
            month = '0' + month;
        if (day.length < 2)
            day = '0' + day;

        return [year, month, day].join('-');
    }

    // convert json to html
    function convert(jsonData) {
        var rows = jsonData.length - 1;
        $("#convertedExcell").empty();
        // Get the container element where the table will be inserted
        let container = $("#convertedExcell");
        $(container).css({ "height": "300px" });
        // Create the table element
        let table = $("<table class='table table-striped table-bordered' id='convertedExcellTable' > ");
        // Get the keys (column names) of the first object in the JSON data
        //let cols = Object.keys(jsonData[0]);
        // Create the header element
        let thead = $("<thead>");
        let tr = $("<tr class='info'>");

        // Loop through the column names and create header cells
        $.each(jsonData[0], function (i, item) {
            let th = $("<th>");
            th.text(item); // Set the column name as the text of the header cell
            tr.append(th); // Append the header cell to the header row
        });
        thead.append(tr); // Append the header row to the header
        table.append(thead) // Append the header to the table
        $('#IMPTXT').val("");
        // Loop through the JSON data and create table rows
        var T = "";
        for (i = 1; i < jsonData.length; i++) {
            let tr = $("<tr>");
            $.each(jsonData[i], (i, elem) => { // Each column
                let td = $("<td>");
                if (elem instanceof Date) {
                    elem = elem.toLocaleString('en-US', { timeZone: 'Asia/Jakarta' }).split(",")[0];
                    elem = formatDate(elem);
                }
                td.text(elem);
                tr.append(td);
                if (elem != undefined) {
                    console.log(elem);
                    T += elem + String.fromCharCode(9);
                } else {
                    T += "" + String.fromCharCode(9);
                }
            });
            table.append(tr);
            T += "\n";
        }
        $('#IMPTXT').val(T);
        $("#IMPROW").text("Rows : " + rows);
        $("#IMPROW").show();
        console.log($('#IMPTXT').val());
        container.append(table) // Append the table to the container element
    }
    $('#IMPFIL').on('hidden.bs.modal', function () {
        $("#IMPROW").text("");
        $("#IMPROW").hide();
        $("#convertedExcell").empty();
        $('#IMPTXT').val("");
        $("#convertedExcell").css({ "height": "auto" });
    });

    // convert json to html

</script>