<?php
session_start();
$id_map_sel = $_SESSION['id_map_sel'];
$user_role = get_user_role($_SESSION['id_user']);
if($user_role == 'administrator') {
    $hash = md5(1 . 'smladmin');
} else {
    $hash = "";
}
?>

<div class="row">
    <div class="col-md-12">
        <div id="toolbar_preview" class="card shadow mb-0 noselect">
            <div class="card-body p-1 pb-0 text-center">
                <div class="toolbar_preview_buttons">
                    <button style="pointer-events:none" onclick="switch_preview_mode('desktop');" id="btn_preview_switch_desktop" class="btn btn-sm btn-dark">
                        <i class="fas fa-desktop"></i>
                    </button>
                    <button onclick="switch_preview_mode('mobile');" id="btn_preview_switch_mobile" class="btn btn-sm btn-outline-dark">
                        <i class="fas fa-mobile"></i>
                    </button>
                    <button id="btn_preview_reload" class="btn btn-sm btn-secondary" onclick="reload_preview();">
                        <i class="fas fa-redo"></i>
                    </button>
                    <script>
                        function switch_preview_mode(mode) {
                            switch(mode) {
                                case 'desktop':
                                    $('#btn_preview_switch_desktop').removeClass('btn-outline-dark').addClass('btn-dark');
                                    $('#btn_preview_switch_mobile').addClass('btn-outline-dark').removeClass('btn-dark');
                                    $('#btn_preview_switch_desktop').css('pointer-events', 'none');
                                    $('#btn_preview_switch_mobile').css('pointer-events', 'initial');
                                    $('#iframe_div').removeClass('mobile');
                                    break;
                                case 'mobile':
                                    $('#btn_preview_switch_desktop').addClass('btn-outline-dark').removeClass('btn-dark');
                                    $('#btn_preview_switch_mobile').removeClass('btn-outline-dark').addClass('btn-dark');
                                    $('#btn_preview_switch_desktop').css('pointer-events', 'initial');
                                    $('#btn_preview_switch_mobile').css('pointer-events', 'none');
                                    $('#iframe_div').addClass('mobile');
                                    break;
                            }
                            $('#btn_preview_reload').trigger('click');
                            $(window).trigger('resize');
                        }
                    </script>
                </div>
            </div>
        </div>
        <div class="card shadow mb-2">
            <div style="overflow:hidden;" class="card-body p-0">
                <div style="display: none;margin-bottom:-10px;" id="iframe_div"></div>
            </div>
        </div>
    </div>
</div>

<script>
    (function($) {
        "use strict";
        window.id_user = '<?php echo $id_user; ?>';
        window.id_map = '<?php echo $id_map_sel; ?>';
        window.hash = '<?php echo $hash; ?>';
        $(document).ready(function () {
            var container_h = $('#content-wrapper').height() - 195;
            preview(window.id_map,container_h);
        });
        $(window).resize(function () {
            var container_h = $('#content-wrapper').height() - 195;
            $('#iframe_div iframe').attr('height',container_h+'px');
            if($('#iframe_div').hasClass('mobile')) {
                $('#iframe_div').css('width',(container_h*9/16)+'px');
            } else {
                $('#iframe_div').css('width','100%');
            }
        });
    })(jQuery);

    function reload_preview() {
        var container_h = $('#content-wrapper').height() - 195;
        preview(window.id_map,container_h);
    }
</script>