<?php
session_start();
$id_map_sel = $_SESSION['id_map_sel'];
$id_user = $_SESSION['id_user'];
$map = get_map($id_map_sel,$id_user);
$geoimages = true;
if($user_info['role']=='editor') {
    $editor_permissions = get_editor_permissions($_SESSION['id_user'],$id_map_sel);
    if($editor_permissions['geoimages']==0) {
        $geoimages=false;
    }
}
?>

<?php if(!$geoimages): ?>
    <div class="text-center">
        <div class="error mx-auto" data-text="401">401</div>
        <p class="lead text-gray-800 mb-5"><?php echo _("Permission denied"); ?></p>
        <p class="text-gray-500 mb-0"><?php echo _("It looks like you found a glitch in the matrix..."); ?></p>
        <a href="index.php?p=dashboard">← <?php echo _("Back to Dashboard"); ?></a>
    </div>
<?php die(); endif; ?>

<div class="row">
    <div class="col-md-12">
        <div class="card shadow mb-2">
            <div class="card-body p-0">
                <div id="map" style="width:100%; height:100vh;">
                    <button onclick="open_add_geoimage();" title="<?php echo _("ADD GEOIMAGE"); ?>" id="btn_add_geoimage" style="position:absolute;top:10px;right:10px;z-index:10;" class="btn btn-circle btn-success <?php echo ($demo) ? 'disabled_d' : ''; ?>"><i class="fas fa-plus"></i></button>
                    <div class="gi_add_div">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <span><?php echo _("position the center of the map where you want to add the image"); ?></span><br>
                                <button onclick="cancel_add_geoimage();" class="btn btn-sm btn-secondary mt-1"><?php echo _("Cancel"); ?></button>&nbsp;&nbsp;<button onclick="confirm_add_geoimage();" class="btn btn-sm btn-success mt-1"><?php echo _("Confirm"); ?></button>
                            </div>
                        </div>
                    </div>
                    <div class="gi_upload_div">
                        <form id="frm" action="ajax/upload_geoimage.php" method="POST" enctype="multipart/form-data">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="txtFile" name="txtFile" />
                                            <label class="custom-file-label" for="txtFile"><?php echo _("Choose file"); ?></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <input <?php echo ($demo) ? 'disabled':''; ?> type="submit" class="btn btn-block btn-success" id="btnUpload" value="<?php echo _("Upload Image"); ?>" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="preview text-center">
                                        <div class="progress mb-3 mb-sm-3 mb-lg-0 mb-xl-0" style="height: 2.35rem;display: none">
                                            <div class="progress-bar" id="progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                                                0%
                                            </div>
                                        </div>
                                        <div style="display: none;padding: .38rem;" class="alert alert-danger" id="error"></div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button onclick="cancel_add_geoimage();" class="btn btn-sm btn-secondary mx-auto mt-1"><?php echo _("Cancel"); ?></button>
                            </div>
                        </div>
                    </div>
                    <div class="gi_add_msg_div">
                        <span><?php echo _("Adding geoimage, please wait..."); ?></span>
                    </div>
                    <div class="gi_opacity_div">
                        <span><?php echo _("Opacity"); ?>: <span id="gi_opacity_value">0.1</span></span><br><input oninput="change_gi_opacity();" onchange="change_gi_opacity();" type="range" step="0.1" min="0.1" max="1.0" class="form-control-range" id="gi_opacity" value="0" />
                        <button onclick="delete_geoimage();" class="btn btn-sm btn-danger mx-auto mt-3"><?php echo _("Delete"); ?></button>
                    </div>
                    <div class="switch_style">
                        <img onclick="change_map_style('default_style');" id="default_style" style="display: none" src="../viewer/images/street.jpg" />
                        <img onclick="change_map_style('satellite_style');" id="satellite_style" src="../viewer/images/satellite.jpg" />
                    </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.markers_size = <?php echo $map['markers_size']; ?>;
        window.enable_map_street = <?php echo ($map['enable_map_street']) ? 1 : 0; ?>;
        window.enable_map_satellite = <?php echo ($map['enable_map_satellite']) ? 1 : 0; ?>;
        window.default_view = '<?php echo $map['default_view']; ?>';
        window.map_style = '<?php echo $map['map_style']; ?>';
        window.window.openfreemap_street_url = '<?php echo $map['window.openfreemap_street_url']; ?>';
        window.map_style_satellite = '<?php echo $map['map_style_satellite']; ?>';
        window.street_maxzoom = <?php echo $map['street_maxzoom']; ?>;
        window.satellite_maxzoom = <?php echo $map['satellite_maxzoom']; ?>;
        window.street_basemap = '<?php echo $map['street_basemap']; ?>';
        window.satellite_basemap = '<?php echo $map['satellite_basemap']; ?>';
        window.maptiler_api = '<?php echo $map['maptiler_api']; ?>';
        window.maptiler_api_satellite = '<?php echo $map['maptiler_api_satellite']; ?>';
        window.here_api = '<?php echo $map['here_api']; ?>';
        window.here_api_satellite = '<?php echo $map['here_api_satellite']; ?>';
        window.here_lang = '<?php echo $map['here_lang']; ?>';
        window.here_lang_satellite = '<?php echo $map['here_lang_satellite']; ?>';
        window.google_api = '<?php echo $map['google_api']; ?>';
        window.google_api_satellite = '<?php echo $map['google_api_satellite']; ?>';
        window.google_lang = '<?php echo $map['google_lang']; ?>';
        window.google_lang_satellite = '<?php echo $map['google_lang_satellite']; ?>';
        window.map_street_provider = '<?php echo $map['map_street_provider']; ?>';
        window.map_satellite_provider = '<?php echo $map['map_satellite_provider']; ?>';
        window.vector_geoimages = null;
        window.selected_geoimage = null;
        window.center_add_coords = [0,0];
        $(document).ready(function () {
            bsCustomFileInput.init();
            $('#btn_add_geoimage').tooltipster({side:'left'});
            var container_h = $('#content-wrapper').height() - 155;
            $('#map').css('height', container_h + 'px');
            default_style = get_map_default_style();
            satellite_style = get_map_satellite_style();
            var initial_layer = default_style;
            if (window.enable_map_street == 0 || window.enable_map_satellite == 0) {
                if (window.enable_map_street == 1) {
                    initial_layer = default_style;
                }
                if (window.enable_map_satellite == 1) {
                    initial_layer = satellite_style;
                }
            }
            map = new ol.Map({
                target: 'map',
                controls: ol.control.defaults.defaults({
                    attribution: false,
                    zoom: true,
                }),
                view: new ol.View({
                    zoom: 1,
                    center: [0, 0]
                }),
                layers: [initial_layer]
            });
            vector_geoimages = new ol.layer.Vector({
                name: 'Vecteur',
                source: new ol.source.Vector({ wrapX: false }),
                style: getTransformLayerStyle
            });
            map.addLayer(vector_geoimages);
            if (window.enable_map_street == 0 && window.enable_map_satellite == 1) {
                change_map_style('satellite_style');
            } else if (window.enable_map_street == 1 && window.enable_map_satellite == 1 && window.default_view == 'satellite') {
                change_map_style('satellite_style');
            }
            get_geoimages(window.id_map);
        });

        $(window).resize(function () {
            var container_h = $('#content-wrapper').height() - 155;
            $('#map').css('height',container_h+'px');
        });
    })(jQuery);

    $('body').on('submit','#frm',function(e){
        e.preventDefault();
        $('#error').hide();
        var url = $(this).attr('action');
        var frm = $(this);
        var data = new FormData();
        if(frm.find('#txtFile[type="file"]').length === 1 ){
            data.append('file', frm.find( '#txtFile' )[0].files[0]);
        }
        var ajax  = new XMLHttpRequest();
        ajax.upload.addEventListener('progress',function(evt){
            var percentage = (evt.loaded/evt.total)*100;
            upadte_progressbar(Math.round(percentage));
        },false);
        ajax.addEventListener('load',function(evt){
            if(evt.target.responseText.toLowerCase().indexOf('error')>=0){
                show_error(evt.target.responseText);
            } else {
                if(evt.target.responseText!='') {
                    add_geoimage(evt.target.responseText);
                }
            }
            upadte_progressbar(0);
            frm[0].reset();
        },false);
        ajax.addEventListener('error',function(evt){
            show_error('upload failed');
            upadte_progressbar(0);
        },false);
        ajax.addEventListener('abort',function(evt){
            show_error('upload aborted');
            upadte_progressbar(0);
        },false);
        ajax.open('POST',url);
        ajax.send(data);
        return false;
    });

    function upadte_progressbar(value){
        $('#progressBar').css('width',value+'%').html(value+'%');
        if(value==0){
            $('.progress').hide();
        }else{
            $('.progress').show();
        }
    }

    function show_error(error){
        $('.progress').hide();
        $('#error').show();
        $('#error').html(error);
    }
</script>