<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard RS MH Thamrin</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>

<style>
@import url(https://fonts.googleapis.com/css?family=Raleway);

* {
    margin: 0;
    padding: 0;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

html {
    height: 100%;
}

body { 
    background: -webkit-linear-gradient(90deg, #00ff08 10%, #4286f4 90%); /* Chrome 10+, Saf5.1+ */
    background:    -moz-linear-gradient(90deg, #00ff08 10%, #4286f4 90%); /* FF3.6+ */
    background:     -ms-linear-gradient(90deg, #00ff08 10%, #4286f4 90%); /* IE10 */
    background:      -o-linear-gradient(90deg, #00ff08 10%, #4286f4 90%); /* Opera 11.10+ */
    background:         linear-gradient(90deg, #00ff08 10%, #4286f4 90%); /* W3C */
    font-family: 'Raleway', sans-serif; 
    font-size: 20px; 
}

#header-container {
    display: block;
  position: absolute;
    width: 320px;
  height: 55px;
    left: 47%;
  top: 57%;
    margin-left: -160px;
  margin-top: -87px;
}

/* Select style here */

select {
    margin: 0 auto;
    color: #00ff08;
    width: 310px;
    padding: 15px;
    height: 25px;
    cursor: pointer;
    background: url(http://sharpik.com/wip/cuteselect/arrow.png) 295px 12px no-repeat white;
}

select:hover {
    background-color: transparent;
    color: white;
    padding: 15px 5px 15px 25px;
}

select option {
    background-color: white;
    color: gray;
    width: 310px;
    padding: 10px 15px;
    height: 20px;
    cursor: pointer;
}

select option:hover {
    padding-left: 25px;
    width: 270px;
    color: #00ff08;
}

.style-header{
    margin:0 auto;
    padding: 2em;
    text-align: center;
    color: white;
}

.style-header h1{
    margin:0;
    font-weight: 700;
    font-size: 3.5em;
    line-height: 1.3;
}

.style-header h1 span{
        display: block;
    font-size: 30%;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
}

</style>
</head>
<body>
    <header class="style-header">
        <h1><span>Dashboard for</span> Radjak Group</h1>
    </header>

<form>

    <section id="header-container">
      <select name="menu2" onChange="window.location.href = this.form.menu2.options[this.form.menu2.selectedIndex].value; return false;">
        <option disabled>Pilih Rumah Sakit MH Thamrin</option>
        <option value="<?php echo base_url(); ?>./../../DashboardRS/Salemba/Welcome">RS MH Thamrin Salemba</option>
        <option value="<?php echo base_url(); ?>./../../DashboardRS/Cileungsi/Welcome">RS MH Thamrin Cileungsi</option>
        <option value="<?php echo base_url(); ?>Welcome">RS MH Thamrin Purwakarta</option>
      </select>
    </section>    
</form>




<!--===============================================================================================-->
    <script src="<?php echo base_url(); ?>assets/style/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="<?php echo base_url(); ?>assets/style/vendor/bootstrap/js/popper.js"></script>
    <script src="<?php echo base_url(); ?>assets/style/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="<?php echo base_url(); ?>assets/style/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="<?php echo base_url(); ?>assets/style/dist/js/main.js"></script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>

<script>
(function() {

    var CuteSelect = CuteSelect || {};

    FIRSTLOAD = true;
    SOMETHINGOPEN = false;

    CuteSelect.tools = {
        canRun: function() {
            var myNav = navigator.userAgent.toLowerCase();
            var browser = (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
            if(browser) {
                return (browser > 8) ? true : false;
            } else { return true; }
        },
        uniqid: function() {
            var n= Math.floor(Math.random()*11);
            var k = Math.floor(Math.random()* 1000000);
            var m = String.fromCharCode(n)+k;
            return m;
        },
        hideEverything: function() {
            if(SOMETHINGOPEN) {
                SOMETHINGOPEN = false;
                targetThis = false;
                var cells = document.getElementsByTagName('div');
                for (var i = 0; i < cells.length; i++) {
                    if(cells[i].hasAttribute('data-cuteselect-options')) { 
                        var parent = cells[i].parentNode;
                        cells[i].style.opacity = '0';
                        cells[i].style.display = 'none';
                    }
                }
            }
        },
        getStyle: function() {
            var css = '';
            var stylesheets = document.styleSheets;
            var css = '';
            for(s = 0; s < stylesheets.length; s++) {
                var classes = stylesheets[s].rules || stylesheets[s].cssRules;
                for (var x = 0; x < classes.length; x++) {
                    if(classes[x].selectorText != undefined) {
                        var selectPosition = classes[x].selectorText.indexOf('select');
                        var optionPosition = classes[x].selectorText.indexOf('option');
                        var selectChar = classes[x].selectorText.charAt(selectPosition - 1);
                        var optionChar = classes[x].selectorText.charAt(optionPosition - 1);
                        if(selectPosition >= 0 && optionPosition >= 0 && (selectChar == '' || selectChar == '}' || selectChar == ' ') && (optionChar == '' || optionChar == '}' || optionChar == ' ')) {
                            text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
                            css += text.replace(/\boption\b/g, '[data-cuteselect-value]').replace(/\bselect\b/g, '[data-cuteselect-item]');
                            continue;
                        }
                        if(selectPosition >= 0) {
                            var character = classes[x].selectorText.charAt(selectPosition - 1);
                            if(character == '' || character == '}' || character == ' ') {
                                text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
                                css += text.replace(/\bselect\b/g, '[data-cuteselect-item]');
                            }
                        }
                        if(optionPosition >= 0) {
                            var character = classes[x].selectorText.charAt(optionPosition - 1);
                            if(character == '' || character == '}' || character == ' ') {
                                text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
                                css += text.replace(/\boption\b/g, '[data-cuteselect-value]');
                            }
                        }
                    }
                }
            }

            return css;
        },
        createSelect: function(item) {

            // Create custom select
            var node = document.createElement("div");
            if(item.hasAttribute('id')) { // Catch ID
                node.setAttribute('id', item.getAttribute('id')); 
                item.removeAttribute('id');
            }
            if(item.hasAttribute('class')) { // Catch Class
                node.setAttribute('class', item.getAttribute('class')); 
                item.removeAttribute('class');
            }

            // Hide select
            item.style.display = 'none';

            // Get Default value (caption)
            var caption = null;
            var cells = item.getElementsByTagName('option'); 
            for (var i = 0; i < cells.length; i++) { 
                caption = cells[0].innerHTML;
                if(cells[i].hasAttribute('selected')) {
                    caption = cells[i].innerHTML;
                    break;
                }
            }

            // Get select options
            var options = '<div data-cuteselect-title>' + caption + '</div><div data-cuteselect-options><div data-cuteselect-options-container>';
            var cells = item.getElementsByTagName('option'); 
            for (var i = 0; i < cells.length; i++) { 
                if(cells[i].hasAttribute('disabled')) { continue; }
                if(cells[i].hasAttribute('class')) { var optionStyle = ' class="' + cells[i].getAttribute('class') + '"'; } else { var optionStyle = ''; }
                if(cells[i].hasAttribute('id')) { var optionId = ' id="' + cells[i].getAttribute('id') + '"'; } else { var optionId = ''; }
                if(cells[i].hasAttribute('selected')) { options += '<div data-cuteselect-value="' + cells[i].value + '" data-cuteselect-selected="true"' + optionStyle + optionId + '>' + cells[i].innerHTML + '</div>'; }
                else { options += '<div data-cuteselect-value="' + cells[i].value + '"' + optionStyle + optionId + '>' + cells[i].innerHTML + '</div>'; }
            }
            options += '</div></div>';

            // New select customization
            node.innerHTML = caption;
            node.setAttribute('data-cuteselect-item', CuteSelect.tools.uniqid());
            node.innerHTML = options; // Display options
            item.setAttribute('data-cuteselect-target', node.getAttribute('data-cuteselect-item'));
            item.parentNode.insertBefore(node, item.nextSibling);

            // Hide all options
            CuteSelect.tools.hideEverything();
        },
        show: function(item) {
            if(item.parentNode.hasAttribute('data-cuteselect-item')) { var source = item.parentNode.getAttribute('data-cuteselect-item'); }
            else { var source = item.getAttribute('data-cuteselect-item'); }
            var cells = document.getElementsByTagName('select');
            if(item.hasAttribute('data-cuteselect-title')) { 
                item = item.parentNode;
                var cells = item.getElementsByTagName('div');  
            }
            else { var cells = item.getElementsByTagName('div');  }
            for (var i = 0; i < cells.length; i++) {
                if(cells[i].hasAttribute('data-cuteselect-options')) {
                    targetItem = cells[i];
                    cells[i].style.display = 'block';
                    setTimeout(function() { targetItem.style.opacity = '1'; }, 10);
                    cells[i].style.position = 'absolute';
                    cells[i].style.left = item.offsetLeft + 'px';
                    cells[i].style.top = (item.offsetTop + item.offsetHeight) + 'px';
                }
            }

            item.focus();

            SOMETHINGOPEN = item.getAttribute('data-cuteselect-item');
        },
        selectOption: function(item) {
            var label = item.innerHTML;
            var value = item.getAttribute('data-cuteselect-value');
            var parent = item.parentNode.parentNode.parentNode;
            var target = parent.getAttribute('data-cuteselect-item');
            var cells = parent.getElementsByTagName('div');
            for (var i = 0; i < cells.length; i++) {
                if(cells[i].hasAttribute('data-cuteselect-title')) { cells[i].innerHTML = label; }
            }

            // Real select
            var cells = document.getElementsByTagName('select');
            for (var i = 0; i < cells.length; i++) {
                var source = cells[i].getAttribute('data-cuteselect-target');
                if(source == target) { cells[i].value = value; }
            }   
            CuteSelect.tools.hideEverything();
            window.location.href = value;
        },
        writeStyles: function() {
            toWrite = '<style type="text/css">' + CuteSelect.tools.getStyle() + ' [data-cuteselect-options] { opacity: 0; display: none; }</style>';
            document.write(toWrite);
        }
    };

    CuteSelect.event = {
        parse: function() {
            var cells = document.getElementsByTagName('select'); 
            for (var i = 0; i < cells.length; i++) { CuteSelect.tools.createSelect(cells[i]); }
        },
        listen: function() {
            document.onkeydown = function(evt) {
                evt = evt || window.event;
                if (evt.keyCode == 27) { CuteSelect.tools.hideEverything(); }
            };
            document.onclick = function(event) {
                FIRSTLOAD = false; 
                if((!event.target.getAttribute('data-cuteselect-item') && !event.target.getAttribute('data-cuteselect-value') && !event.target.hasAttribute('data-cuteselect-title')) || ((event.target.hasAttribute('data-cuteselect-item') || event.target.hasAttribute('data-cuteselect-title')) && SOMETHINGOPEN)) { 
                    CuteSelect.tools.hideEverything();
                    return; 
                }
                var action = event.target;
                if(event.target.getAttribute('data-cuteselect-value')) {
                    CuteSelect.tools.selectOption(action);
                    CuteSelect.tools.hideEverything();
                } 
                else { CuteSelect.tools.show(action); }
                return false;
            }
        },
        manage: function() {
            if(CuteSelect.tools.canRun()) { // IE Compatibility
                CuteSelect.event.parse();
                CuteSelect.event.listen();
                CuteSelect.tools.writeStyles();
            }
        }
    };

    CuteSelect.event.manage();

})();
</script>

</body>
</html>
