<!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/crypto.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"></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="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-org-chart@3.0.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/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>
    <!-- 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>

        var firebaseConfig = {
            apiKey: "AIzaSyAtB7v-iBgJRxJiwiBTjAe-9xubD2zTen8",
            authDomain: "ayaa-d1bbd.firebaseapp.com",
            //databaseURL: "YOUR_FIREBASE_DATBASE_URL",
            projectId: "ayaa-d1bbd",
            storageBucket: "ayaa-d1bbd.firebasestorage.app",
            messagingSenderId: "150299531812",
            appId: "1:150299531812:web:ffff8276057774ac3bd6b1",
            measurementId: "G-7B1DML8G7R"
        };
        firebase.initializeApp(firebaseConfig);
        const messaging = firebase.messaging();

        function IntitalizeFireBaseMessaging() {
            messaging
                .requestPermission()
                .then(function () {
                    return messaging.getToken();
                })
                .then(function (token) {
                    $('#token').val(token);
                })
                .catch(function (reason) {
                });
        }

        messaging.onMessage(function (payload) {
            const notificationOption = {
                body: payload.notification.body,
                icon: payload.notification.icon
            };

            if (Notification.permission === "granted") {
                var notification = new Notification(payload.notification.title, notificationOption);

                notification.onclick = function (ev) {
                    ev.preventDefault();
                    window.open(payload.notification.click_action, '_blank');
                    notification.close();
                }
            }

        });
        messaging.onTokenRefresh(function () {
            messaging.getToken()
                .then(function (newtoken) {
                })
                .catch(function (reason) {
                })
        })
        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="input-group"
                            style="display: inherit;float: left; width: -webkit-fill-available;  flex: 0 2 auto;">
                            <input id='SEARCHBAR' type='text' class='form-control' placeholder='Search'
                                style="max-width: 100%; margin-top: 7px; " />
                            <span id='SEARCHBARFlow_Button' class="input-group-addon" onclick="GetPageBySearch();"
                                style="width: 0%;margin-top: 7px;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>

                        <!--  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> Us</a></li>
                                    <li><a href="https://doc.microsystems-eg.com/?website=ticket" target="_blank"><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 class="container-fluid" id="FLOW">
                    <!--Alert message-->

                    <div class="row">
                        <div class="col-md-6">
                            <div class="alert alert-warning" role="alert" style="text-align:right">

                                يمكنك من خلال زر
                                <button type="button" class="btn btn-default">الإستيراد</button>
                                الموجود أعلى الشاشة
                                رفع ملفات الإكسيل على النظام لسهولة استيراد البيانات من ملفات الاكسيل
                                <br>
                                <a href="https://youtu.be/lRL5Aa1mIDY" target="_blank"><b>فيديو شرح كيفية رفع ملفات
                                        الإكسيل</b></a>
                                <br />
                                <br />
                                <br />
                                <br />
                            </div>

                        </div>
                        <div class="col-md-6">
                            <div class="alert alert-warning" role="alert" style="text-align:right">
                                يمكنك الأن التواصل مع الدعم الفنى والإبلاغ عن المشاكل و الأعطال بطريقة أكثر سهولة
                                لضمان الإستجابة السريعة وحل الأعطال فى أسرع وقت ممكن
                                <br>
                                عن طريق الضغط على زر الإبلاغ
                                <a href="https://doc.microsystems-eg.com/" type="button" class="btn btn-default"
                                    target="_blank">Report a Problem</a>
                                او زياره موقعنا
                                <br /> www.doc.microsystems-eg.com
                                <br />
                                و إتباع الشرح الموجود فى الفيديو
                                <br>
                                <a href="https://youtu.be/zeYVMPCyd04" target="_blank"> <b>فيديو شرح كيفية الإبلاغ عن
                                        المشاكل والأعطال </b></a>
                            </div>
                        </div>

                    </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="">
                                        <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>
                                            <fieldset class="scheduler-border">
                                                <legend class="scheduler-border"><i
                                                        class="glyphicon glyphicon-pushpin"></i>FLOW</legend>

                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <!--   <div id="google_translate_element"></div>
                                                    <script type="text/javascript">
                                                        function googleTranslateElementInit() {
                                                        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
                                                        }
                                                      </script> -->
                                                        <a href="#" class="btn btn-primary btn-block ">Sales</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Inventory
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Supply Chain
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">project
                                                            management</a>
                                                    </div>
                                                </div>
                                                <br />
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">General
                                                            Ledger</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Treasury &
                                                            Banking</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Assets
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">E-taxes interface
                                                        </a>
                                                    </div>

                                                </div>
                                                <br />
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Job Orders</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Logistics
                                                            Management</a>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Fleet Management
                                                        </a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Document Control
                                                        </a>
                                                    </div>


                                                </div>
                                            </fieldset>

                                            <fieldset class="scheduler-border">
                                                <legend class="scheduler-border"><i
                                                        class="glyphicon glyphicon-pushpin"></i>HCONE</legend>
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Personnel
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Attendance
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Payroll
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Leave
                                                            Management</a>
                                                    </div>
                                                </div>
                                                <br />
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Recruitment
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Performance
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Training
                                                            Management</a>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <a href="#" class="btn btn-primary btn-block ">Transportation
                                                            Management</a>
                                                    </div>

                                                </div>
                                            </fieldset>


                                        </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">
                        <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-04-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-04-08" />
                                                        <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">
                        <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">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="text-center">Login</h2>
                    </div>
                    <div class="modal-body">
                        <form class="form col-md-12 center-block">
                            <div class="form-group">
                                <input id='ACC' type='text' class='form-control' placeholder='Account No.'>
                            </div>
                            <div class="form-group">
                                <input id="USRID" type="text" class="form-control" placeholder="User Name">
                            </div>
                            <div class="form-group">
                                <input id="PASS" type="password" class="form-control" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <select class="form-control" id="LNG">
                                    <option value="ENG">English</option>
                                    <option value="ARB">Arabic</option>

                                </select>
                            </div>
                            <div class="form-group">
                                <input id="RMMBR" type="checkbox">
                                Remember Me
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn default" id="default"
                                    onclick="CHGTHM('default');"></button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn green" id="green" onclick="CHGTHM('Green');"></button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn red" id="red" onclick="CHGTHM('Red');"></button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn orange" id="orange"
                                    onclick="CHGTHM('Orange');"></button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn lightblue" id="lightblue"
                                    onclick="CHGTHM('Light');"></button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn darkblue" id="darkblue"
                                    onclick="CHGTHM('DarkBlue');"></button>
                            </div>
                            <div class="form-group">
                                <label id="STS">Please Login</label>
                                <button class="btn btn-primary btn-block" onclick="CMDCHK();" type="button">Sign
                                    In</button>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                    </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="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>
                                    <option value="G">Group</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-04-08" />
                                    </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-pencil"></i>Report Genrator</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Dashbord ID</label>
                                    <select class="form-control" id="DSHID">
                                    </select>


                                    <label>Report Title</label>
                                    <input type="text" class="form-control" id="RPTTIT" />

                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Report Options</label>
                                <select class="form-control" id="TYP">
                                    <option value="R">Report</option>
                                    <option value="C">Chart</option>
                                </select>
                                <input type="hidden" id="OPT" />

                                <label>Show Col.</label>
                                <input type="text" class="form-control" id="SHWCOL" />
                                <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" id="SAVDSH" class="btn btn-default" data-dismiss="modal"
                            onclick="SAVRPTGEN();">Save</button>
                    </div>
                </div>

            </div>
        </div>

    </form>
    <input type="hidden" id="APISRV" value='https://api.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) {
        var t = confirm("Are you sure!!")
        if (!t) {
            return;
        }
        var SL = "MSGDEL" + "," + r;
        EXECMD($('#form1'), SL, LDMYSG);

    };
    $(document).ready(function () {
        // Disable right-click context menu
      //  $(document).bind("contextmenu", function (e) {
    //        e.preventDefault();
   //     });
        
        // Disable keyboard shortcuts
        $(document).keydown(function (e) {
            // Block F12
            if (e.which === 123) {
                return false;
            }
            
            // Block all Shift combinations except Shift+0-9 (numbers)
            //if ((e.shiftKey && e.keyCode != '1'.charCodeAt(0)) && 
            //    (e.shiftKey && e.keyCode != '2'.charCodeAt(0)) && 
            //    (e.shiftKey && e.keyCode != '3'.charCodeAt(0)) &&
            //   (e.shiftKey && e.keyCode != '4'.charCodeAt(0)) && 
             //   (e.shiftKey && e.keyCode != '5'.charCodeAt(0)) && 
            //    (e.shiftKey && e.keyCode != '6'.charCodeAt(0)) &&
            //    (e.shiftKey && e.keyCode != '7'.charCodeAt(0)) && 
             //   (e.shiftKey && e.keyCode != '8'.charCodeAt(0)) && 
            //    (e.shiftKey && e.keyCode != '9'.charCodeAt(0)) &&
            //    (e.shiftKey && e.keyCode != '0'.charCodeAt(0))) {
            //    return false;
          //  }

            // Block all Ctrl combinations except: Ctrl+A, Ctrl+V, Ctrl+C, Ctrl+F, Ctrl+S
           // if ((e.ctrlKey && e.keyCode != 'A'.charCodeAt(0)) && 
           //     (e.ctrlKey && e.keyCode != 'V'.charCodeAt(0)) && 
           //     (e.ctrlKey && e.keyCode != 'C'.charCodeAt(0)) && 
           //     (e.ctrlKey && e.keyCode != 'F'.charCodeAt(0)) && 
           //     (e.ctrlKey && e.keyCode != 'S'.charCodeAt(0))) {
            //    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);
                var bytes = CryptoJS.AES.decrypt(localStorage.PASS, `${$('#USRID').val() + $('#ACC').val()}`);
                var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                $('#PASS').val(plaintext);
                $('#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();
                var ciphertext = CryptoJS.AES.encrypt($('#PASS').val(), `${$('#USRID').val() + $('#ACC').val()}`);
                localStorage.PASS = ciphertext.toString();
                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() {

        if (localStorage.THEME) {
            if (localStorage.USR != "" && (localStorage.USR == $('#USRID').val() || localStorage.USR == $('#CUSER').val())) {
                $("#theme").attr("href", localStorage.THEME);

            }
        }
        // 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);
        var SL = "SELECT DSHID,DSHNA FROM dshmas where sts<>'D' ORDER BY DSHID ";
        $("#DSHID").empty();
        FillCombo($("#DSHID"), SL);
    }
    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);
        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('dblclick', function () {
                    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");
                        }
                        else if (info[4] == "Personal") {
                            $('#CLNGRP').val("P");
                        }
                        else if (info[4] == "Group") {
                            $('#CLNGRP').val("G");
                        }
                        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;
                }
                if (!confirm("Are you sure about this change?")) {
                    revertFunc();
                }
                else {
                    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");
                    }
                    else if (info[4] == "Personal") {
                        $('#CLNGRP').val("P");
                    }
                    else if (info[4] == "Group") {
                        $('#CLNGRP').val("G");
                    }
                    else {
                        $('#CLNGRP').val("");
                    }
                    SAVEVN();
                }
            },
            //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'));
    });
    $('#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);
        console.log(skillsSelect.value);
        $("#FRMRPTGEN [name=RPTNA]").val(skillsSelect.value);
        $('#DTL').html('');
        var SL1 = ReadForm($('#form1'));
        while (SL1.indexOf(String.fromCharCode(11)) > -1) {
            SL1 = SL1.replace(String.fromCharCode(11), ";");
        }
        $('#OPT').val(SL1);
        var x = '';
        tab = document.getElementById('DTL'); // id of table        
        console.log($.fn.DataTable.isDataTable(tab));
        if ($.fn.DataTable.isDataTable(tab)) {
            var table = $('#DTL').DataTable();
            var columns = $(tab).dataTable().dataTableSettings[0].aoColumns;
            $.each(columns, function (i, v) {
                //      alert('Column index '+i+' is ' +
                //    (table.column(i).visible() === true ? 'visible' : 'not visible')
                //);
                if (table.column(i).visible() === true) {
                    if (x == '') {
                        x = '[' + i + ']'
                    }
                    else {
                        x += ',[' + i + ']'
                    }
                }

            });
        }
        $("#SHWCOL").val(x);

    });
    function SAVRPTGEN() {
        if (!IsValue($("#RPTNA"))) {
            MSGBOX('Select Report');
            return;
        }
        if (!IsValue($("#RPTTIT"))) {
            MSGBOX('Enter Report Title');
            return;
        }
        if ($("#DSHID").val() == "-1") {
            MSGBOX("Enter ID");
            return;
        }
        /*  const data = {
             DSHID: $('#DSHID').val(),
             RPTTIT: $('#RPTTIT').val(),
             RPTNA: $('#RPTNA').val(),
             TYP: $('#TYP').val(),
             SHWCOL: $('#SHWCOL').val(),
             OPT: $('#OPT').val(),
             CHRTYP: $('#CHRTYP').val(),
             S1: $('#S1').val(),
             S2: $('#S2').val(),
             S3: $('#S3').val(),
             S4: $('#S4').val(),
             S5: $('#S5').val(),
             S6: $('#S6').val()
         };
         const jsonData = JSON.stringify(data);
         console.log(jsonData);
         APICMD("dshcmd/SAVSUB", jsonData); */
        SAVMAS($('#FRMRPTGEN'), 'DSHCNF', 'DSHID,RPTTIT');
    };

    $(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>