<!DOCTYPE html>

<html>

<head>
    <title>SeatMaster</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <!-- CSS -->

    <link rel="icon" type="image/gif/png" href="../images/icon-1.png">

    <link href="bootstrap-3.3.2-dist/css/filter.svg" rel="stylesheet" />
    <!-- <link id="botthm" href="bootstrap-3.3.2-dist/css/bootstrap-theme.css" rel="stylesheet" />
    <link href="bootstrap-3.3.2-dist/css/bootstrap-theme.min.css" rel="stylesheet" />-->
    <!-- <link href="bootstrap-3.3.2-dist/css/bootstrap-flipped.css" rel="stylesheet" />
    <link href="bootstrap-3.3.2-dist/css/bootstrap-rtl.css" rel="stylesheet" />-->

    <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 rel='stylesheet' href='bootstrap-3.3.2-dist/css/fullcalendar.css' />


    <!-- <link href="thems/dark.css" rel="stylesheet" />-->
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <link href="bootstrap-3.3.2-dist/css/styles.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="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

    <!--<script src="bootstrap-3.3.2-dist/js/ColReorderWithResize.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>
    <!--<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='bootstrap-3.3.2-dist/js/moment.min.js'></script>
    <script src='bootstrap-3.3.2-dist/js/fullcalendar.min.js'></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYFlOymVaMa0q_vKyqKfeIJgRhrysKyvA"></script>
    <!--<script src="http://maps.googleapis.com/maps/api/js"></script>-->
    <script type="text/javascript" src="Scripts/jquery.signalR-1.1.3.min.js"></script>
    <script>
        var TXTM = [];
        function pc() {
            GETFILE($('#HIMG'), "FLOW", $('#CUSER').val(), "1", "1");
        }
        $(function () {
            $('#header').load('../src/ers/header-m.html', pc);
            //
            $("#footer").load("../src/COMMON/footer.html");
        });
        $(window).load(function () {
            $('#loginModal').modal('show');
            //LDMNU();
        });
        function DELMSG(r) {
            var t = confirm("Are you sure!!")
            if (!t) {
                return;
            }
            var SL = "MSGDEL" + "," + r;
            EXECMD($('#form1'), SL, LDMYSG);

        };

        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'));
        }
        function CMDCHK() {
            var ACCNO = " ";
            if ($('#ACC').length) {
                if (ACC.value == '') { STS.textContent = 'Please Enter Your Account Number'; return; } else { ACCNO = ACC.value }
            }
            if (USRID.value == "") {
                STS.textContent = "Please Enter Your User ID";
                $('#USRID').focus();
                return;
            }
            if (PASS.value == "") {
                STS.textContent = "Please Enter Your Password";
                $('#PASS').focus();
                return;
            }
            if (document.getElementById("RMMBR").checked) {
                if (typeof (Storage) !== "undefined") {
                    localStorage.USRID = $('#USRID').val();
                    localStorage.PASS = $('#PASS').val();
                    localStorage.ACCNO = $('#ACC').val();
                }
            }
            else {
                localStorage.USRID = "";
            }
            CHKUSR(ACCNO, USRID.value, PASS.value, LNG.value, GETCAL);
            MSGTXT = "Connecting Please Wait ..";
            if ($('#CLNG').val() == "ARB") {
                $("body").css("font-size", "16px");
                MSGTXT = "جارى الاتصال .. يرجى الانتظار";
            }
            STS.textContent = MSGTXT;
        };
        function CHGPSS() {
            if (CPASS.value == "") {
                STSPAS.textContent = "Enter Current Password";
                return;
            }
            if (NPASS.value == "") {
                STSPAS.textContent = "Enter New Password";
                return;
            }
            if (NPASS2.value == "") {
                STSPAS.textContent = "Re-Enter New Password";
                return;
            }
            if (NPASS.value != NPASS2.value) {
                STSPAS.textContent = "New Password Dosn't Match";
                return;
            }
            if (NPASS.value.length < 6) {
                STSPAS.textContent = "Password Must be 6 characters at least";
                return;
            }
            var CHKNUM = false;
            var CHKCHR = false;
            var PSS = NPASS.value;
            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.value, NPASS.value);
        };
        function SHOWCHG() {
            $('#CHGPASS').modal('show');
        };


    </script>
    <script type="text/javascript">
        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'));
        }
        function showMnu() {
            $("#FLW-COL").toggle();
            // if (document.getElementById('FLW-COL').className == "col-sm-9") {
            //     document.getElementById('FLW-COL').className = "col-sm-12";
            // }
            // else {
            //     document.getElementById('FLW-COL').className = "col-sm-9";
            // }
        }
        function OrignalDate() {
            $('#STRDT').val($('#SD').val());
        }



        function EMPTYCLN() {
            $('#SRCOPC').val("");
            $('#CLNID').val("");
            $('#CLNDT').val("");
            $('#STRTM').val("");
            $('#ENDTM').val("");
            $('#CLNDES').val("");
            $('#CLNID').val("");
            $('#STATUS').val("A");
        }
        function GETCAL() {

            SHOWPAGE('HALLRES');
            GETUSR();

        }
        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);

            }
            // document.getElementById("udes").innerHTML = "Log out " + document.getElementById("USRDES").value;
            if (IsValue($('#EMPNO'))) {
                SL = "select EMPNM,TEL,EMPADD,EMPSEX,EMAIL,BRDT,MTRSTS from EMPMAS WHERE EMPNO=" + $('#EMPNO').val();
                GETREC($("#form1"), SL, GETEMP);
            }

        }
        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 += ZIPCLN();
            EXECMD($('#form1'), SL, GETCLN);
        }
        function DELEVN() {
            var SL = "CLNCMD,DELCLN,";
            SL += ZIPCLN();
            EXECMD($('#form1'), SL, GETCLN2);
        }
        function ZIPCLN() {
            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();
        }
        $(document).ready(function () {

            if (localStorage.getItem("THEME") != null && localStorage.getItem("THEME") != "undefined") {
                $("#theme").attr("href", localStorage.THEME);
            }
            if (localStorage.getItem("LANG") != null) {
                $('#LNG').val(localStorage.LANG);
                $("#CLNG").val($("#LNG").val());
                if (localStorage.LANG == "ARB") {
                    $("body").css("font-size", "16px");
                }
            } else {
                localStorage.LANG = "ENG";
                $('#LNG').val("ENG");
                $("#CLNG").val("ENG");
            }
            LDLANG();
            if ($('#USRLOG').val() == "Y") {
                SHOWPAGE('HALLRES');
                GETFILE($('#IMG'), "FLOW", $('#CUSER').val(), "1", "1");
                GETFILE($('#HIMG'), "FLOW", $('#CUSER').val(), "1", "1");

            }
            if (typeof (Storage) !== "undefined") {
                if (localStorage.USRID) {
                    $('#USRID').val(localStorage.USRID);
                    $('#PASS').val(localStorage.PASS);
                    $('#ACC').val(localStorage.ACCNO);
                    $('#RMMBR').prop('checked', true);
                    CMDCHK();
                }
            }
            $("#ImpFile").change(function () {
                readImpFile(this);

            });
            function readImpFile(input) {
                if (input.files[0].size > 1000000) {
                    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();
                }
            });
            $("#LNG").change(function () {
                $("#CLNG").val($("#LNG").val());
                LDLANG();
                localStorage.LANG = $("#LNG").val();
                return;
            });

            $('#CLNTYP').change(function () {

                if ($('#CLNTYP').val() == 'G') {
                    $('#GRP').show();
                }
                else {
                    $('#GRP').hide();
                }
            });
        })
        function GETINFO() {
            document.getElementById("cc").innerHTML = '&nbsp;';
            document.getElementById("cc").innerHTML = '<div id="calendar"></div>';
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                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);
                            SL = "SELECT JOBDES AS 'Problems' FROM JOBDTL WHERE CLNID=" + info[0];
                            LDTBL(SL, $('#DTL'), $('#DTL'));
                            $('#JOBORD').modal('toggle');
                        }
                        else {
                            $('#CLNID').val(info[0]);
                            $('#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();
                    }
                },
                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);

                }
            });
            $("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);
                    }
                }
                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';
                    }
                }
                $('#calendar').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"
                );
            });
        }
    </script>


</head>

<body>

    <div id="header"></div>

    <!-- Main -->
    <div class="container-fluid" style="margin-top: 60px">


        <!-- Left column -->
        <div class="btn-group btn-group-justified" id="FLW-COL">
            <div class="btn-group">
                <button type="button" id="1" class="btn btn-info" onclick="SHOWPAGE('HALLRES');">Reservation</button>
            </div>
            <!-- <div class="btn-group">
                <button type="button" id="2" class="btn btn-info" onclick="SHOWPAGE('HALLTKT');">Ticketing</button>
            </div>
            <div class="btn-group">
                <button id="3" type="button" class="btn btn-info"
                    onclick="SHOWPAGE('POS,OPCODE=SALINV');">P.O.S</button>
            </div> -->
            <div class="btn-group">
                <button id="4" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Masters <span
                        class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li><a id="9" href="#" onclick="SHOWPAGE('COMPANY');">Company</a></li>
                    <li><a id="10" href="#" onclick="SHOWPAGE('CONGRP,CCODE=STR');">Regions</a></li>
                    <li><a id="11" href="#" onclick="SHOWPAGE('MOVTAX');">Taxes Setup</a></li>
                    <li><a id="12" href="#" onclick="SHOWPAGE('CONTACT,CCODE=R');">Producers</a></li>
                    <li><a id="13" href="#" onclick="SHOWPAGE('CONTACT,CCODE=D');">Distributor</a></li>
                    <li><a id="14" href="#" onclick="SHOWPAGE('MOVDOC');">MOVIES</a></li>
                    <li><a id="15" href="#" onclick="SHOWPAGE('ACCMAS');">Cashier</a></li>
                    <li><a id="16" href="#" onclick="SHOWPAGE('CONTACT,CCODE=C');">Customer</a></li>
                    <li><a id="32" href="#" onclick="SHOWPAGE('APPART');">Applications</a></li>
                    <li><a id="17" href="#" onclick="SHOWPAGE('GSTITM');">Items</a></li>
                    <li><a id="33" href="#" onclick="SHOWPAGE('GLMAS,GLTYP=GL');">Gl Master</a></li>
                </ul>
            </div>
            <div class="btn-group">
                <button id="5" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    Events <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li><a id="18" href="#" onclick="SHOWPAGE('EVNMAS');">Events Master</a></li>
                    <li><a id="19" href="#" onclick="SHOWPAGE('EVENTPRC');">Ticket Prices</a></li>
                    <li><a id="20" href="#" onclick="SHOWPAGE('ACCDOC');">Teller</a></li>
                </ul>
            </div>

            <div class="btn-group">
                <button id="6" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    Halls <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li><a id="21" href="#" onclick="SHOWPAGE('HALLMAS');">Halls Master</a></li>
                    <li><a id="22" href="#" onclick="SHOWPAGE('HALLSEC');">Hall Section</a></li>
                    <li><a id="23" href="#" onclick="SHOWPAGE('PGMENT');">Hall Program</a></li>
                </ul>
            </div>

            <div class="btn-group">
                <button id="7" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    Security <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li><a id="24" href="#" onclick="SHOWPAGE('CONGRP,CCODE=USR');">Users Groups</a></li>
                    <li><a id="25" href="#" onclick="SHOWPAGE('USRMAS');">Users Masters</a></li>
                    <li><a id="26" href="#" onclick="SHOWPAGE('APPSEC');">Manage User Authority</a></li>
                    <li><a id="27" href="#" onclick="SHOWPAGE('SYSINF');">System Info</a></li>
                    <li><a id="28" href="#" onclick="SHOWPAGE('DBSET');">Query Data</a></li>
                </ul>
            </div>

            <div class="btn-group">
                <button id="8" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    Inquiry <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li><a id="29" href="#" onclick="SHOWPAGE('RESANL');">Reservation Inquiry</a></li>
                    <li><a id="30" href="#" onclick="SHOWPAGE('POSANL,OPCODE=SALINV');">P.O.S Inquiry</a></li>
                    <li><a id="31" href="#" onclick="SHOWPAGE('ACCANL');">Account Inquiry</a></li>
                    <!--<button type="button" class="btn btn-info" onclick="SHOWPAGE('RESANL');">Inquiry</button>-->
                </ul>
            </div>
        </div>
        <br />
        <div class="row">
            <!-- /col-3 -->
            <div class="col-sm-12">
                <div class="container-fluid" id="FLOW">
                    <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="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h4>Requests</h4>
                                </div>
                                <div class="panel-body">

                                    <table id="DTLTMP"></table>

                                    <ul class="nav nav-defult nav-justified" id="Requests">
                                        <li class="active"><a onclick="LDPAGE('MYREQ', $('#New'));" href="#Purchase"
                                                data-toggle="tab"><i class="glyphicon glyphicon-file"></i> My Requests
                                            </a></li>
                                        <li><a onclick="LDPAGE('SRVREQ', $('#Support'));" href="#Support"
                                                data-toggle="tab"><i class="glyphicon glyphicon-wrench"></i> Support
                                                Request</a></li>
                                        <li><a onclick="LDPAGE('PREREQ', $('#Purchase'));" href="#Purchase"
                                                data-toggle="tab"><i class="glyphicon glyphicon-shopping-cart"></i>
                                                Requisition</a></li>
                                        <li><a href="#Meeting" data-toggle="tab"><i
                                                    class="glyphicon glyphicon-calendar"></i> Meeting</a></li>
                                    </ul>
                                    <hr />
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="New">
                                            <h4><i class="glyphicon glyphicon-file"></i></h4>

                                        </div>
                                        <div class="tab-pane" id="Support">
                                            <h4><i class="glyphicon glyphicon-wrench"></i></h4>


                                        </div>
                                        <div class="tab-pane" id="Purchase">

                                            <h4><i class="glyphicon glyphicon-shopping-cart"></i> Purchase Request </h4>



                                        </div>
                                        <div class="tab-pane" id="Meeting">
                                            <h4><i class="glyphicon glyphicon-calendar"></i></h4>

                                        </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">Personal Profile</a>
                                        </li>
                                        <li><a href="#messages" data-toggle="tab">Time & Attendance Record</a></li>
                                        <li><a onclick="LDPAGE('HRREQ', $('#HRREQ'));" href="#HRREQ"
                                                data-toggle="tab">HR Request</a></li>
                                    </ul>
                                    <hr />
                                    <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">
                                                                <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)">

                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <input type="text" class="form-control" id="TEL2"
                                                                    placeholder="Tel.(2)">
                                                                <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();"><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();"><span
                                                                class="glyphicon glyphicon-cloud-upload"></span></button>
                                                        <img id="IMG" 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 class="tab-pane" id="HRREQ">

                                            </div>

                                        </div>

                                    </div>

                                    <div class="clearfix visible-lg"></div>

                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-info">
                                    <div class="panel-heading">
                                        <h4>Message</h4>
                                    </div>
                                    <div class="panel-body">
                                        <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">

                                                        <!-- 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> 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>
                                        </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>
                            </div>
                        </div>



                        <div class="row">
                            <div class="col-lg-12">
                                <div class="panel panel-info">
                                    <div class="panel-heading">
                                        <h4>Did you know</h4>
                                    </div>
                                    <div class="panel-body">
                                        <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">لتكبير الشاشة اضغط
                                                        على علامة FloW اعلى اليسار</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تفعيل التعامل
                                                        بالعملات علي الخزن والبنوك</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تفعيل إستيراد
                                                        المستندات للمخازن والمبيعات والمشتريات</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تفعيل إستيراد
                                                        الإيصالات للخزن والبنوك</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تفعيل إرفاق الصور
                                                        لمستندات المخازن والمبيعات والمشتريات</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تفعيل إرفاق الصور
                                                        لإيصالات الخزن والبنوك</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تفعيل إرسال
                                                        التقرير بالبريد الإلكتروني</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تصحيح عناوين
                                                        التقارير عند تصدير المستندات</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">يمكن وضح شاشة محددة
                                                        للمستخدم بحيث تكون هي الصفحة الرئيسية له</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تفعيل خاصية الدخول
                                                        الي الحساب مباشراً كالتالي
                                                        <br />app.microsystems-eg.com/?ACC=رقم الحساب
                                                    </p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">يمكن ربط المستخدم علي
                                                        عميل معين لتسهيل إنشاء مستخدمين للعملاء</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">يمكن وضع البريد
                                                        الإلكتروني الخاص بالمستخدم علي النظام بحيث يقوم بإرسال الرسائل
                                                        من خلالة بدل من البريد الإلكتروني للنظام</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم إضافة معالجة
                                                        الرصيد للخزن</p>
                                                </div>
                                                <div class="item">
                                                    <p style="text-align:center; font-size:larger">تم تفعيل كشف حساب
                                                        الجهات تفصيل، مختصر</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>
                                </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">
                    <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"><span class="glyphicon glyphicon-picture"></span> Import
                                Data File</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form col-md-12 center-block">
                                <div class="form-group">
                                    <div id="IMPFRM"></div>
                                </div>
                                <div class="form-group">

                                </div>
                                <div class="form-group">

                                </div>
                                <div class="form-group">

                                </div>
                                <div class="form-group">
                                    <label id="Label1">Select File To Upload</label>
                                    <button class="btn btn-primary btn-block" onclick="$('#ImpFile').trigger('click');"
                                        type="button">Select File</button>
                                    <button class="btn btn-primary btn-block" onclick="IMPDTA();"
                                        type="button">UpLoad</button>
                                </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>
                        <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"
            data-keyboard="false">
            <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>
                        <h4 class="modal-title" id="H1"><span class="glyphicon glyphicon-remove"></span> System Alert
                        </h4>
                    </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-05-20" />
                                        </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="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="USRDES" value="" />
        <input type="hidden" id="EMPNO" 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="CPAGE" value="" />
    <input type="hidden" id="APPCODE" value="ERS" />
    <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="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="" />
    <input type="hidden" id="APPCODE" value="ERS" />
    <input type='file' id="ImpFile" accept="text/plain" style="display: none;" />
    <svg id="l"></svg>
</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>-->

<!--<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>
    $('.modal').on('shown.bs.modal', function () {
        $(this).find('[autofocus]').focus();
    });
    function UPL() {
        UPLIMG('IMG', "FLOW", $('#CUSER').val(), "1", "1");
    }
    function OPN() {
        $("#asd").trigger('click');
    }
    $("#asd").change(function () {
        ReadImg(this, $('#IMG'));
        ReadImg(this, $('#HIMG'));
    });
    function LDLANG() {
        var AMNU = [];
        AMNU[1] = "Reservation";
        AMNU[2] = "Ticketing";
        AMNU[3] = "P.O.S";
        AMNU[4] = "Masters";
        AMNU[5] = "Events";
        AMNU[6] = "Halls";
        AMNU[7] = "Security";
        AMNU[8] = "Inquiry";
        AMNU[9] = "Companies";
        AMNU[10] = "Regions";
        AMNU[11] = "Taxes Setup";
        AMNU[12] = "Producers";
        AMNU[13] = "Distributor";
        AMNU[14] = "MOVIES";
        AMNU[15] = "Cashier";
        AMNU[16] = "Customer";
        AMNU[17] = "Items";
        AMNU[18] = "Events Master";
        AMNU[19] = "Ticket Prices";
        AMNU[20] = "Teller";
        AMNU[21] = "Halls Master";
        AMNU[22] = "Hall Section";
        AMNU[23] = "Hall Program";
        AMNU[24] = "Users Groups";
        AMNU[25] = "Users Masters";
        AMNU[26] = "Manage User Authority";
        AMNU[27] = "System Info";
        AMNU[28] = "Query Data";
        AMNU[29] = "Reservation Inquiry";
        AMNU[30] = "P.O.S Inquiry";
        AMNU[31] = "Account Inquiry";
        AMNU[32] = "Application";
        AMNU[33] = "GL Master";
        if ($('#CLNG').val() == "ARB") {
            AMNU[1] = "الحجز";
            AMNU[2] = "تذاكر الالعاب";
            AMNU[3] = "نقاط البيع";
            AMNU[4] = "تعريفات رئيسية";
            AMNU[5] = "البرامج";
            AMNU[6] = "قاعات العرض";
            AMNU[7] = "امن النظام";
            AMNU[8] = "الاستعلام";
            AMNU[9] = "الشركات";
            AMNU[10] = "المناظق";
            AMNU[11] = "الضرائب";
            AMNU[12] = "المنتج";
            AMNU[13] = "الموزع";
            AMNU[14] = "الافلام";
            AMNU[15] = "الخزينة";
            AMNU[16] = "العملاء";
            AMNU[17] = "الاصناف";
            AMNU[18] = "الحفلات";
            AMNU[19] = "اسعار التذاكر";
            AMNU[20] = "الحركات";
            AMNU[21] = "تعريف القاعات";
            AMNU[22] = "تقسيم القاعات";
            AMNU[23] = "تحديد الافلام";
            AMNU[24] = "مجموعات المستخدمين";
            AMNU[25] = "المستخدمين";
            AMNU[26] = "صلاحيات المستخدمين";
            AMNU[27] = "بيانات اساسية";
            AMNU[28] = "Query Data";
            AMNU[29] = "الاستعلام عن الحجز";
            AMNU[30] = "الاستعلام عن نقاط البيع";
            AMNU[31] = "الاستعلام عن الخزن";
            AMNU[32] = "التطبيقات";
            AMNU[33] = "دليل الحسابات";
        }

        for (i = 1; i <= AMNU.length - 1; i++) {
            console.log(AMNU[i]);
            console.log(typeof (d));
            var d = document.getElementById(i);
            var T = AMNU[i];
            if (typeof (d) != 'undefined' && d != null) {
                d.value = AMNU[i];
                var spans = d.getElementsByTagName('span'), obj = {};
                if (typeof (spans[0]) != 'undefined' && spans[0] != null) {
                    T += "<span class='caret'></span>";
                }
                d.innerHTML = T;
            }
        }
    }
</script>