<?php
session_start();
require_once("functions.php");
$id_map = $_GET['id'];
$map = get_map($id_map,$_SESSION['id_user']);
if($map!==false) {
    $settings = get_settings();
    $tmp_languages = get_languages_map();
    $array_languages = $tmp_languages[0];
    $default_language = $tmp_languages[1];
    $count_markers = get_marker_count_map($id_map);
    $users = get_users($map['id_user']);
    $user_role = get_user_role($_SESSION['id_user']);
    if($user_info['role']=='editor') {
        $editor_permissions = get_editor_permissions($_SESSION['id_user'],$id_map);
        if($editor_permissions['edit_map']==0) {
            $map=false;
        }
    }
    $_SESSION['id_map_sel'] = $id_map;
    $_SESSION['name_map_sel'] = $map['name'];
    if(empty($map['markers_color_hex'])) $map['markers_color_hex']=$map['main_color_hex'];
}
$url_background_image = "";
$url_background_image_mobile = "";
$url_intro_image = "";
$url_song = "";
if(!empty($map['song'])) {
    $url_song = "../viewer/content/".$map['song'];
}
if(!empty($map['background_image'])) {
    $url_background_image = "../viewer/content/".$map['background_image'];
}
if(!empty($map['background_image_mobile'])) {
    $url_background_image_mobile = "../viewer/content/".$map['background_image_mobile'];
}
if(!empty($map['intro_image'])) {
    $url_intro_image = "../viewer/content/".$map['intro_image'];
}
if(!empty($map['default_extra_fields'])) {
    $default_extra_fields = json_decode($map['default_extra_fields'],true);
} else {
    $default_extra_fields = array();
}
if(!empty($map['default_am_fields'])) {
    $default_am_fields = json_decode($map['default_am_fields'],true);
} else {
    $default_am_fields = array();
}
if(!empty($map['default_am_placeholders'])) {
    $default_am_placeholders = json_decode($map['default_am_placeholders'],true);
} else {
    $default_am_placeholders = array();
}
$map_style_sel = $map['map_street_provider'];
$map_style_satellite_sel = $map['map_satellite_provider'];
if(!empty($map['intro_params'])) {
    $intro_params = json_decode($map['intro_params'],true);
} else {
    $intro_params = [
            "background"=>"rgba(255,255,255,0.7)",
            "title"=>"Exploration Unleashed: Navigate the Unknown",
            "title_size"=>42,
            "title_color"=>"#000000",
            "description"=>"With the digital map illuminated on their device, the explorer's pulse quickened with anticipation. Each contour hinted at adventure: unexplored forests, meandering rivers, and towering peaks awaited discovery. Armed with determination and a thirst for exploration, they set out to uncover the hidden treasures marked on the map's virtual interface, prepared to leave their mark on the uncharted territories of the digital landscape.",
            "description_size"=>16,
            "description_color"=>"#000000",
            "image_height"=>80,
            "button"=>"START EXPLORE NOW &nbsp;<i class='fa-solid fa-arrow-right-long'></i>",
            "button_size"=>18,
            "button_background"=>"#ffffff",
            "button_color"=>"#000000",
    ];
}
$array_input_lang = array();
$default_am_placeholders_langs = array();
$query_lang = "SELECT * FROM sml_maps_lang WHERE id_map=$id_map;";
$result_lang = $mysqli->query($query_lang);
if($result_lang) {
    if ($result_lang->num_rows > 0) {
        while($row_lang = $result_lang->fetch_array(MYSQLI_ASSOC)) {
            $language = $row_lang['language'];
            if(!empty($row_lang['intro_params'])) {
                $intro_params_lang = json_decode($row_lang['intro_params'],true);
                $row_lang['intro_title'] = $intro_params_lang['title'];
                $row_lang['intro_description'] = $intro_params_lang['description'];
                $row_lang['intro_button'] = $intro_params_lang['button'];
            } else {
                $row_lang['intro_title'] = "";
                $row_lang['intro_description'] = "";
                $row_lang['intro_button'] = "";
            }
            if(!empty($row_lang['default_am_placeholders'])) {
                $default_am_placeholders_langs[$language] = json_decode($row_lang['default_am_placeholders'],true);
            } else {
                $default_am_placeholders_langs[$language] = array();
            }
            unset($row_lang['id_map']);
            unset($row_lang['language']);
            $array_input_lang[$language]=$row_lang;
        }
    }
}
foreach ($array_languages as $lang_t) {
    if($default_am_placeholders_langs[$lang_t]==null){
        $default_am_placeholders_langs[$lang_t] = array();
    }
}
$address_format_definitions = [
        'street'      => _("Street Address"),
        'city'        => _("City"),
        'county'      => _("County"),
        'state'       => _("State / Province"),
        'postal_code' => _("Postal Code"),
        'country'     => _("Country")
];
$address_format_db_json = $map['address_format'];
$address_format_saved_array = json_decode($address_format_db_json, true);
$address_format_display_items = [];
if (empty($address_format_saved_array) || !is_array($address_format_saved_array)) {
    foreach ($address_format_definitions as $address_format_key => $address_format_label) {
        $address_format_display_items[] = ['field' => $address_format_key, 'enabled' => true];
    }
} else {
    $address_format_display_items = $address_format_saved_array;
    $address_format_saved_keys = array_column($address_format_display_items, 'field');
    foreach ($address_format_definitions as $address_format_key => $address_format_label) {
        if (!in_array($address_format_key, $address_format_saved_keys)) {
            $address_format_display_items[] = ['field' => $address_format_key, 'enabled' => true];
        }
    }
}
?>

<?php if(!$map): ?>
    <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>
    <script>
        $('.map_select_header').remove();
    </script>
<?php die(); endif; ?>

<ul class="nav bg-white nav-pills nav-fill mb-2">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#settings_tab"><i class="fas fa-cogs"></i> <?php echo strtoupper(_("SETTINGS")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#auth_tab"><i class="fas fa-user-lock"></i> <?php echo strtoupper(_("LOGIN")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#quality_tab"><i class="fas fa-gauge-high"></i> <?php echo strtoupper(_("QUALITY")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#address_tab"><i class="fas fa-text-width"></i> <?php echo strtoupper(_("ADDRESS FORMAT")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#style_tab"><i class="fas fa-palette"></i> <?php echo strtoupper(_("STYLE")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#search_tab"><i class="fas fa-search"></i> <?php echo strtoupper(_("SEARCH")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#list_tab"><i class="fas fa-list"></i> <?php echo strtoupper(_("LIST")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#categories_tab"><i class="fas fa-stream"></i> <?php echo strtoupper(_("CATEGORIES")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#markers_tab"><i class="fas fa-map-marker-alt"></i> <?php echo strtoupper(_("MARKERS")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#cluster_tab"><i class="fas fa-circle-nodes"></i> <?php echo strtoupper(_("CLUSTER")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#add_markers_tab"><i class="fas fa-plus-circle"></i> <?php echo strtoupper(_("ADD MARKERS FROM MAP")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#geolocation_tab"><i class="fas fa-crosshairs"></i> <?php echo strtoupper(_("LOCATION / TRACKING")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#loading_tab"><i class="fas fa-spinner"></i> <?php echo strtoupper(_("LOADING")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#info_tab"><i class="fas fa-info"></i> <?php echo strtoupper(_("INFO")); ?></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#custom_html_tab"><i class="fab fa-html5"></i> <?php echo strtoupper(_("CUSTOM HTML")); ?></a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="auth_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-info">
                    <?php echo _("Configure whether users can log in or register directly from the Viewer and choose which map actions require an authenticated user. If Viewer Login is disabled, these protections are ignored and the map keeps the current public behavior."); ?>
                </div>
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-user-lock"></i> <?php echo _("Viewer Login"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="viewer_auth_mode"><?php echo _("Viewer Login"); ?></label><br>
                                    <select id="viewer_auth_mode" class="form-control">
                                        <option <?php echo ((int)($map['viewer_auth_mode'] ?? 0)==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ((int)($map['viewer_auth_mode'] ?? 0)==1) ? 'selected' : ''; ?> id="1"><?php echo _("Login"); ?></option>
                                        <option <?php echo ((int)($map['viewer_auth_mode'] ?? 0)==2) ? 'selected' : ''; ?> id="2"><?php echo _("Login")." + "._("Registration"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="add_marker_require_login"><?php echo _("Add Marker"); ?></label><br>
                                    <input type="checkbox" id="add_marker_require_login" <?php echo (!empty($map['add_marker_require_login'])) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="review_require_login"><?php echo _("Review Marker"); ?></label><br>
                                    <input type="checkbox" id="review_require_login" <?php echo (!empty($map['review_require_login'])) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="add_photo_require_login"><?php echo _("Add Photo"); ?></label><br>
                                    <input type="checkbox" id="add_photo_require_login" <?php echo (!empty($map['add_photo_require_login'])) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="issue_report_require_login"><?php echo _("Issue Report"); ?></label><br>
                                    <input type="checkbox" id="issue_report_require_login" <?php echo (!empty($map['issue_report_require_login'])) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="live_tracking_require_login"><?php echo _("Live Tracking"); ?></label><br>
                                    <input type="checkbox" id="live_tracking_require_login" <?php echo (!empty($map['live_tracking_require_login'])) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="address_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <p class="mb-2"><?php echo _("Drag and drop the items below to configure how addresses should be displayed."); ?></p>
                                <ul id="address-sorter" class="list-unstyled d-flex flex-wrap justify-content-start mb-0">
                                    <?php
                                    foreach ($address_format_display_items as $address_format_item) {
                                        $address_format_key = $address_format_item['field'];
                                        if (!isset($address_format_definitions[$address_format_key])) continue;
                                        $address_format_label = $address_format_definitions[$address_format_key];
                                        $address_format_is_enabled = isset($address_format_item['enabled']) ? (bool)$address_format_item['enabled'] : true;
                                        $address_format_checked_attr = $address_format_is_enabled ? 'checked' : '';
                                        $address_format_opacity_style = $address_format_is_enabled ? 'opacity: 1;' : 'opacity: 0.6;';
                                        echo '  <li class="card m-2 shadow-sm flex-shrink-0" data-field="'.$address_format_key.'" style="width: 240px; '.$address_format_opacity_style.'">
                                                    <div class="card-body p-2 d-flex align-items-center justify-content-between">
                                                        <i class="fas fa-grip-vertical text-muted drag-handle py-2 pr-3" style="cursor: grab;"></i>
                                                        <span class="font-weight-bold px-2 text-truncate" title="'. htmlspecialchars($address_format_label) .'">'. htmlspecialchars($address_format_label) .'</span>
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input" id="check_'.$address_format_key.'" '.$address_format_checked_attr.'>
                                                            <label class="custom-control-label" for="check_'.$address_format_key.'"></label>
                                                        </div>
                                                    </div>
                                                </li>';
                                    }
                                    ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="cluster_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="density_color"><?php echo _("Density color"); ?> <i title="<?php echo _("displays different colors based on the density of marker grouping"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="density_color" <?php echo ($map['density_color']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="density_color_tolerance"><?php echo _("Density Color Tolerance"); ?> <i title="<?php echo _("tolerance to color the grouped markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input min="0" step="1" type="number" class="form-control" id="density_color_tolerance" value="<?php echo $map['density_color_tolerance']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="cluster_distance"><?php echo _("Density Distance"); ?> <i title="<?php echo _("distance in pixels within which features will be clustered together. 0 to disable clustering"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input min="0" step="1" type="number" class="form-control" id="cluster_distance" value="<?php echo $map['cluster_distance']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="cluster_animation"><?php echo _("Animation"); ?> <i title="<?php echo _("animates clusters on zoom change (0 to disable)"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="cluster_animation" value="<?php echo $map['cluster_animation']; ?>">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">ms</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="custom_html_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="custom_html"><?php echo htmlspecialchars(str_replace('\"','"',$map['custom_html'])); ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="info_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="info_enable"><?php echo _("Enable"); ?></label><br>
                                    <input type="checkbox" id="info_enable" <?php echo ($map['info_enable']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="info_auto_open"><?php echo _("Auto Open"); ?></label><br>
                                    <select id="info_auto_open" class="form-control">
                                        <option <?php echo ($map['info_auto_open']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['info_auto_open']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled (Desktop and Mobile)"); ?></option>
                                        <option <?php echo ($map['info_auto_open']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (Only on Desktop)"); ?></option>
                                        <option <?php echo ($map['info_auto_open']==3) ? 'selected' : ''; ?> id="3"><?php echo _("Enabled (Only on Mobile)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><?php echo _("Icon"); ?></label><br>
                                    <button class="btn btn-sm btn-primary" type="button" id="GetIconPicker_info" data-iconpicker-input="input#info_icon_input" data-iconpicker-preview="i#info_icon"><?php echo _("Select Icon"); ?></button>
                                    <input readonly type="text" id="info_icon_input" name="Icon" value="<?php echo $map['info_icon']; ?>" required="" placeholder="" autocomplete="off" spellcheck="false">
                                    <div class="icon-preview d-inline-block ml-1" data-toggle="tooltip" title="">
                                        <i id="info_icon" class="<?php echo $map['info_icon']; ?>"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <label><?php echo _("Content"); ?></label><?php echo print_language_input_selector($array_languages,$default_language,'info_content'); ?><br>
                                <div><div id="info_content"><?php echo $map['info_content']; ?></div></div>
                                <?php foreach ($array_languages as $lang) {
                                    if($lang!=$default_language) : ?>
                                        <div style="display:none;"><div id="info_content_<?php echo $lang; ?>" class="input_lang" data-target-id="info_content" data-lang="<?php echo $lang; ?>"><?php echo $array_input_lang[$lang]['info_content']; ?></div></div>
                                    <?php endif;
                                } ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="geolocation_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-location-crosshairs"></i> <?php echo _("My Location"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="default_my_location"><?php echo _("Auto show"); ?> <i title="<?php echo _("automatically geolocate and show the location"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="default_my_location" class="form-control">
                                        <option <?php echo ($map['default_my_location']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['default_my_location']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled (Desktop and Mobile)"); ?></option>
                                        <option <?php echo ($map['default_my_location']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (Only on Desktop)"); ?></option>
                                        <option <?php echo ($map['default_my_location']==3) ? 'selected' : ''; ?> id="3"><?php echo _("Enabled (Only on Mobile)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="my_location_mode"><?php echo _("Mode"); ?></label><br>
                                    <select id="my_location_mode" class="form-control">
                                        <option <?php echo ($map['my_location_mode']=='disabled') ? 'selected' : ''; ?> id="disabled"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['my_location_mode']=='geolocate') ? 'selected' : ''; ?> id="geolocate"><?php echo _("Geolocate"); ?></option>
                                        <option <?php echo ($map['my_location_mode']=='geolocate_follow') ? 'selected' : ''; ?> id="geolocate_follow"><?php echo _("Geolocate")." > "._("Follow"); ?></option>
                                        <option <?php echo ($map['my_location_mode']=='follow_geolocate') ? 'selected' : ''; ?> id="follow_geolocate"><?php echo _("Follow")." > "._("Geolocate"); ?></option>
                                        <option <?php echo ($map['my_location_mode']=='follow') ? 'selected' : ''; ?> id="follow"><?php echo _("Follow"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="my_location_zoom"><?php echo _("Zoom"); ?> <i title="<?php echo _("zoom level when enabling geolocation (1 far - 20 near)"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <select id="my_location_zoom" class="form-control">
                                        <option <?php echo ($map['my_location_zoom']==0) ? 'selected' : ''; ?> id="0"><?php echo _("No change"); ?></option>
                                        <?php
                                        for($i=1;$i<=20;$i++) {
                                            if($map['my_location_zoom']==$i) {
                                                echo "<option selected id='$i'>$i</option>";
                                            } else {
                                                echo "<option id='$i'>$i</option>";
                                            }
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-location-arrow"></i> <?php echo _("Live Tracking"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="live_tracking"><?php echo _("Enable"); ?> <i title="<?php echo _("enable a button to start live tracking on the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="live_tracking" class="form-control">
                                        <option <?php echo ($map['live_tracking']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['live_tracking']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled"); ?></option>
                                        <option <?php echo ($map['live_tracking']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (auto open)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="live_tracking_interval"><?php echo _("Update Interval"); ?> <i title="<?php echo _("position update interval"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="live_tracking_interval" value="<?php echo $map['live_tracking_interval']; ?>">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">ms</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="live_tracking_timeout"><?php echo _("Timeout"); ?> <i title="<?php echo _("if after this time no more position is received the marker is deleted (must be greater than the update interval)"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="live_tracking_timeout" value="<?php echo $map['live_tracking_timeout']; ?>">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">ms</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="live_tracking_only_admin"><?php echo _("Only admin"); ?> <i title="<?php echo _("positions can only be seen by administrators"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="live_tracking_only_admin" <?php echo ($map['live_tracking_only_admin']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="categories_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_categories"><?php echo _("Enable"); ?> <i title="<?php echo _("enable the category filter/featured in the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="enable_categories" class="form-control">
                                        <option <?php echo ($map['enable_categories']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['enable_categories']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled (Filter and Featured)"); ?></option>
                                        <option <?php echo ($map['enable_categories']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (Only Filter)"); ?></option>
                                        <option <?php echo ($map['enable_categories']==3) ? 'selected' : ''; ?> id="3"><?php echo _("Enabled (Only Featured)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="cat_filter"><?php echo _("Auto show"); ?> <i title="<?php echo _("automatically open the categories filter"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="cat_filter" class="form-control">
                                        <option <?php echo ($map['cat_filter']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['cat_filter']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled (Desktop and Mobile)"); ?></option>
                                        <option <?php echo ($map['cat_filter']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (Only on Desktop)"); ?></option>
                                        <option <?php echo ($map['cat_filter']==3) ? 'selected' : ''; ?> id="3"><?php echo _("Enabled (Only on Mobile)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="show_categories_marker"><?php echo _("Show icons on markers"); ?> <i title="<?php echo _("show categories icon on marker detail / list"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="show_categories_marker" class="form-control">
                                        <option <?php echo ($map['show_categories_marker']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Hidden"); ?></option>
                                        <option <?php echo ($map['show_categories_marker']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Show (icons on list; icons and names on detail)"); ?></option>
                                        <option <?php echo ($map['show_categories_marker']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Show (icons and names always visible)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="fit_categories"><?php echo _("Fit Markers"); ?> <i title="<?php echo _("when toggle categories it fits the visible markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="fit_categories" <?php echo ($map['fit_categories']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="cat_filter_type"><?php echo _("Filter - Type"); ?></label><br>
                                    <select id="cat_filter_type" class="form-control">
                                        <option <?php echo ($map['cat_filter_type']=='or') ? 'selected' : ''; ?> id="or"><?php echo _("OR"); ?></option>
                                        <option <?php echo ($map['cat_filter_type']=='and') ? 'selected' : ''; ?> id="and"><?php echo _("AND"); ?></option>
                                        <option <?php echo ($map['cat_filter_type']=='or_and') ? 'selected' : ''; ?> id="or_and"><?php echo _("OR / AND"); ?></option>
                                        <option <?php echo ($map['cat_filter_type']=='and_or') ? 'selected' : ''; ?> id="and_or"><?php echo _("AND / OR"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="no_category_sel_mode"><?php echo _("Filter - No results"); ?></label><br>
                                    <select id="no_category_sel_mode" class="form-control">
                                        <option <?php echo ($map['no_category_sel_mode']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Show all markers / geodatas"); ?></option>
                                        <option <?php echo ($map['no_category_sel_mode']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Do not show markers / geodatas"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="category_featured_mode"><?php echo _("Featured - Mode"); ?></label> <i title="<?php echo _("the filter mode follows the same logic as the filters, while the toggle mode enables one category at a time"); ?>" class="help_t fas fa-question-circle"></i><br>
                                    <select id="category_featured_mode" class="form-control">
                                        <option <?php echo ($map['category_featured_mode']=='filter') ? 'selected' : ''; ?> id="filter"><?php echo _("Filter"); ?></option>
                                        <option <?php echo ($map['category_featured_mode']=='toggle') ? 'selected' : ''; ?> id="toggle"><?php echo _("Toggle"); ?></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="markers_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_last_update"><?php echo _("Last Update Date"); ?> <i title="<?php echo _("shows the last update date for markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_last_update" <?php echo ($map['enable_last_update']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_streetview"><?php echo _("Street View"); ?> <i title="<?php echo _("enable the button 'street view' for markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_streetview" <?php echo ($map['enable_streetview']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_reviews"><?php echo _("Reviews"); ?> <i title="<?php echo _("enable the reviews for markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_reviews" <?php echo ($map['enable_reviews']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_add_photo"><?php echo _("Add Photo"); ?> <i title="<?php echo _("enable the ability to add photo from the map for markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_add_photo" <?php echo ($map['enable_add_photo']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_share"><?php echo _("Share"); ?> <i title="<?php echo _("enable share buttons for markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_share" <?php echo ($map['enable_share']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="tts_enable"><?php echo _("TextToSpeech"); ?> <i title="<?php echo _("enable the ability to hear the description of a marker with a voice"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="tts_enable" <?php echo ($map['tts_enable']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_issue_reports"><?php echo _("Report Issue"); ?> <i title="<?php echo _("enable the ability to report an issue on a marker"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_issue_reports" <?php echo ($map['enable_issue_reports']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="marker_images_num"><?php echo _("Media - Maximum number"); ?> <i title="<?php echo _("maximum number of media that can be uploaded per marker (-1 = Infinite)"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="number" min="-1" class="form-control" id="marker_images_num" value="<?php echo $map['marker_images_num']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="marker_images_compression"><?php echo _("Media - Compress quality"); ?> <i title="<?php echo _("10 to 100: lower values means faster loading (poor quality), higher value means slow loading (high quality). 100 to disable compression."); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input min="10" max="100" type="number" class="form-control" id="marker_images_compression" value="<?php echo $map['marker_images_compression']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="marker_images_max_size"><?php echo _("Media - Max size"); ?> <i title="<?php echo _("maximum size in pixels of media images. if they exceed this size the images will be resized. 0 to disable resize."); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="marker_images_max_size" value="<?php echo $map['marker_images_max_size']; ?>" />
                                        <div class="input-group-append">
                                            <span class="input-group-text">px</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-map-marker-alt"></i> <?php echo _("Default Markers Icon"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><?php echo _("Icon Type"); ?></label>
                                    <select id="icon_type" onchange="change_icon_type();" class="form-control">
                                        <option <?php echo ($map['markers_icon']=='' && $map['markers_icon_image']=='') ? 'selected' : '' ; ?> id="0"><?php echo _("Circle"); ?></option>
                                        <option <?php echo ($map['markers_icon']!='' && $map['markers_icon_image']=='') ? 'selected' : '' ; ?> id="1"><?php echo _("Icon"); ?></option>
                                        <option <?php echo ($map['markers_icon_image']!='') ? 'selected' : '' ; ?> id="2"><?php echo _("Icon Library"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="markers_size"><?php echo _("Size"); ?> (<span id="markers_size_value"><?php echo $map['markers_size']; ?></span>)</label><br>
                                    <input oninput="change_markers_size();" onchange="change_markers_size();" type="range" step="0.1" min="0.1" max="2.0" class="form-control-range" id="markers_size" value="<?php echo $map['markers_size']; ?>" />
                                </div>
                            </div>
                            <div id="icon_type_1" class="col-md-12 <?php echo ($map['markers_icon']!='' && $map['markers_icon_image']=='') ? '' : 'd-none' ; ?>">
                                <div class="form-group">
                                    <label><?php echo _("Icon"); ?></label><br>
                                    <button class="btn btn-sm btn-primary" type="button" id="GetIconPicker" data-iconpicker-input="input#marker_icon_input" data-iconpicker-preview="i#marker_icon"><?php echo _("Select Icon"); ?></button>
                                    <input readonly type="text" id="marker_icon_input" name="Icon" value="<?php echo $map['markers_icon']; ?>" required="" placeholder="" autocomplete="off" spellcheck="false">
                                    <div class="icon-preview d-inline-block ml-1" data-toggle="tooltip" title="">
                                        <i id="marker_icon" class="<?php echo $map['markers_icon']; ?>"></i>
                                    </div>
                                </div>
                            </div>
                            <div id="icon_type_2" class="col-md-12 <?php echo ($map['markers_icon_image']!='') ? '' : 'd-none' ; ?>">
                                <div class="form-group">
                                    <label for="marker_library_icon"><?php echo _("Icon"); ?></label><br>
                                    <button data-toggle="modal" data-target="#modal_library_icons" class="btn btn-sm btn-primary" type="button" id="btn_library_icon"><?php echo _("Select Library Icon"); ?></button>
                                    <input type="hidden" id="marker_library_icon" value="<?php echo $map['markers_id_icon_library']; ?>">
                                    <img id="marker_library_icon_preview" style="height: 30px;display: <?php echo ($map['markers_icon_image']=='') ? 'none':'inline-block'; ?>" src="../viewer/icons/<?php echo $map['markers_icon_image']; ?>">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group <?php echo ($map['markers_icon_image']!='') ? 'disabled':''; ?>">
                                    <label><?php echo _("Background"); ?></label>
                                    <input type="text" class="form-control" id="color_hex" value="<?php echo $map['markers_color_hex']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group <?php echo ($map['markers_icon_image']!='' || ($map['markers_icon']=='' && $map['markers_icon_image']=='')) ? 'disabled':''; ?>">
                                    <label><?php echo _("Color"); ?></label>
                                    <input type="text" class="form-control" id="icon_color_hex" value="<?php echo $map['markers_icon_color_hex']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group <?php echo ($map['markers_icon_image']!='') ? 'disabled':''; ?>">
                                    <label><?php echo _("Background (Hover / Active)"); ?></label>
                                    <input type="text" class="form-control" id="color_hex_hover" value="<?php echo $map['markers_color_hex_hover']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group <?php echo ($map['markers_icon_image']!='' || ($map['markers_icon']=='' && $map['markers_icon_image']=='')) ? 'disabled':''; ?>">
                                    <label><?php echo _("Color (Hover / Active)"); ?></label>
                                    <input type="text" class="form-control" id="icon_color_hex_hover" value="<?php echo $map['markers_icon_color_hex_hover']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <button id="btn_assign_icons" onclick="assign_icon_to_markers('map',<?php echo $id_map; ?>)" class="btn btn-block btn-primary <?php echo ($demo) ? 'disabled':''; ?> <?php echo ($count_markers==0) ? 'disabled' : ''; ?>"><?php echo _("ASSIGN ICON TO")." ".$count_markers." "._("MARKERS"); ?></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fab fa-wpforms"></i> <?php echo _("Default Extra Fields Icons"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <?php
                                for($i=1;$i<=10;$i++) { ?>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <button style="min-width: 150px;" class="btn btn-sm btn-primary field_icon_picker" type="button" id="GetIconPicker_e<?php echo $i; ?>" data-iconpicker-input="input#marker_icon_input_e<?php echo $i; ?>" data-iconpicker-preview="i#marker_icon_e<?php echo $i; ?>"><?php echo _("Field Icon"); ?> <?php echo $i; ?></button>
                                                <input style="display: none" readonly type="text" id="marker_icon_input_e<?php echo $i; ?>" name="Icon" value="<?php echo (array_key_exists($i,$default_extra_fields)) ? $default_extra_fields[$i] : 'far fa-circle'; ?>" required="" placeholder="" autocomplete="off" spellcheck="false">
                                                <div style="width: 30px;" class="icon-preview d-inline-block ml-1" data-toggle="tooltip" title="">
                                                    <i id="marker_icon_e<?php echo $i; ?>" class="<?php echo (array_key_exists($i,$default_extra_fields)) ? $default_extra_fields[$i] : 'far fa-circle'; ?>"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                            <div class="col-md-6">
                                <?php
                                for($i=11;$i<=20;$i++) { ?>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <button style="min-width: 150px;" class="btn btn-sm btn-primary field_icon_picker" type="button" id="GetIconPicker_e<?php echo $i; ?>" data-iconpicker-input="input#marker_icon_input_e<?php echo $i; ?>" data-iconpicker-preview="i#marker_icon_e<?php echo $i; ?>"><?php echo _("Field Icon"); ?> <?php echo $i; ?></button>
                                                <input style="display: none" readonly type="text" id="marker_icon_input_e<?php echo $i; ?>" name="Icon" value="<?php echo (array_key_exists($i,$default_extra_fields)) ? $default_extra_fields[$i] : 'far fa-circle'; ?>" required="" placeholder="" autocomplete="off" spellcheck="false">
                                                <div style="width: 30px;" class="icon-preview d-inline-block ml-1" data-toggle="tooltip" title="">
                                                    <i id="marker_icon_e<?php echo $i; ?>" class="<?php echo (array_key_exists($i,$default_extra_fields)) ? $default_extra_fields[$i] : 'far fa-circle'; ?>"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <button id="btn_assign_fields" onclick="assign_fields_to_markers(<?php echo $id_map; ?>)" class="btn btn-block btn-primary <?php echo ($demo) ? 'disabled':''; ?> <?php echo ($count_markers==0) ? 'disabled' : ''; ?>"><?php echo _("ASSIGN FIELD ICONS TO")." ".$count_markers." "._("MARKERS"); ?></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane active" id="settings_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="name"><?php echo _("Name"); ?> *</label><?php echo print_language_input_selector($array_languages,$default_language,'name'); ?>
                                    <input type="text" class="form-control" id="name" value="<?php echo htmlspecialchars($map['name']); ?>" />
                                    <?php foreach ($array_languages as $lang) {
                                        if($lang!=$default_language) : ?>
                                            <input style="display:none;" type="text" class="form-control input_lang" data-target-id="name" data-lang="<?php echo $lang; ?>" value="<?php echo htmlspecialchars($array_input_lang[$lang]['name']); ?>" />
                                        <?php endif;
                                    } ?>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="user"><?php echo _("User"); ?> <i title="<?php echo _("owner of the map"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <select id="user" class="form-control" <?php echo ($user_role=='administrator' && $users['count']>1) ? '' : 'disabled' ?> >
                                        <?php echo $users['options']; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="language"><?php echo _("Default Language"); ?></label>
                                    <select class="form-control id="language">
                                        <?php if((!check_language_enabled('en_US',$settings['languages_enabled']) && check_language_enabled('en_GB',$settings['languages_enabled'])) || (check_language_enabled('en_US',$settings['languages_enabled']) && !check_language_enabled('en_GB',$settings['languages_enabled']))) {
                                            $languages_list['en_GB']['name'] = "English";
                                            $languages_list['en_US']['name'] = "English";
                                        } ?>
                                        <option <?php echo ($map['language']=='') ? 'selected':''; ?> id=""><?php echo _("Default")." ({$settings['language']})"; ?></option>
                                        <?php foreach ($languages_list as $lang_code => $lang_data): ?>
                                            <?php if (check_language_enabled($lang_code, $settings['languages_enabled'])): ?>
                                                <option <?php echo ($map['language']==$lang_code) ? 'selected':''; ?> id="<?php echo $lang_code; ?>"><?php echo $lang_data['name']." - ".$lang_data['native_name']." ($lang_code)"; ?></option>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                    </select>
                                    <script type="text/javascript">
                                        var initialSelectedValue = $('#language option:selected').attr('id');
                                        $('#language').on('change', function (e) {
                                            var currentSelectedValue = $('#language option:selected').attr('id');
                                            var currentSelectedValues = $('#languages_enabled').val();
                                            if (currentSelectedValue!=initialSelectedValue && currentSelectedValues.length>0) {
                                                $('#modal_change_languages').modal('show');
                                            }
                                        });
                                    </script>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="languages_enabled"><?php echo _("Languages Enabled"); ?></label>
                                    <select style="height: 125px" multiple class="form-control selectpicker" id="languages_enabled" data-container="body" data-actions-box="true" data-selected-text-format="count > 2" data-count-selected-text="{0} <?php echo _("items selected"); ?>" data-deselect-all-text="<?php echo _("Deselect All"); ?>" data-select-all-text="<?php echo _("Select All"); ?>" data-none-selected-text="<?php echo _("Only default"); ?>" data-none-results-text="<?php echo _("No results matched"); ?> {0}">
                                        <?php if((!check_language_enabled('en_US',$settings['languages_enabled']) && check_language_enabled('en_GB',$settings['languages_enabled'])) || (check_language_enabled('en_US',$settings['languages_enabled']) && !check_language_enabled('en_GB',$settings['languages_enabled']))) {
                                            $languages_list['en_GB']['name'] = "English";
                                            $languages_list['en_US']['name'] = "English";
                                        }
                                        foreach ($languages_list as $lang_code => $lang_data): ?>
                                            <?php if (check_language_enabled($lang_code, $settings['languages_enabled'])): ?>
                                                <option <?php echo (check_language_enabled_map($lang_code,$settings['languages_viewer_enabled'],$map['languages_enabled'])) ? 'selected':''; ?> id="ls_<?php echo $lang_code; ?>"><?php echo $lang_data['name']." - ".$lang_data['native_name']." ($lang_code)"; ?></option>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                    </select>
                                    <script type="text/javascript">
                                        var initialSelectedValues = $('#languages_enabled').val().slice();
                                        $('#languages_enabled').selectpicker('render');
                                        $('#languages_enabled').on('hidden.bs.select', function (e) {
                                            var currentSelectedValues = $('#languages_enabled').val();
                                            if (currentSelectedValues.length !== initialSelectedValues.length ||
                                                currentSelectedValues.some(value => !initialSelectedValues.includes(value)) ||
                                                initialSelectedValues.some(value => !currentSelectedValues.includes(value))) {
                                                $('#modal_change_languages').modal('show');
                                            }
                                        });
                                    </script>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="category"><?php echo _("Category"); ?></label><br>
                                    <div class="input-group">
                                        <select multiple id="category" data-selected-text-format="count > 3" data-count-selected-text="{0} <?php echo _("items selected"); ?>" data-none-selected-text="<?php echo _("Nothing selected"); ?>" class="form-control selectpicker">
                                            <?php echo get_categories_option($id_map); ?>
                                        </select>
                                        <script type="text/javascript">$('#category').selectpicker('render');</script>
                                        <?php if ($user_info['role']=='administrator') : ?>
                                            <div class="input-group-append">
                                                <button data-toggle="modal" data-target="#modal_add_category" class="btn btn-primary btn-xs <?php echo ($demo) ? 'disabled' : ''; ?>" type="button"><i style="color: white" class="fas fa-plus"></i></button>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="unit_map"><?php echo _("Unit"); ?></label>
                                    <select onchange="change_search_radius_m();" class="form-control" id="unit_map">
                                        <option <?php echo ($map['unit_map']=='km') ? 'selected' : ''; ?> id="km"><?php echo _("Metrics"); ?></option>
                                        <option <?php echo ($map['unit_map']=='miles') ? 'selected' : ''; ?> id="miles"><?php echo _("Miles"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_measure"><?php echo _("Measurements"); ?> <i title="<?php echo _("show the button that allows you to take measurements on the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_measure" <?php echo ($map['enable_measure']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="show_scale_control"><?php echo _("Scale Indicator"); ?> <i title="<?php echo _("show the scale indicator on the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="show_scale_control" <?php echo ($map['show_scale_control']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="nav_markers"><?php echo _("Control Arrows Markers"); ?> <i title="<?php echo _("show controls arrows to loop through the markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="nav_markers" <?php echo ($map['nav_markers']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_story"><?php echo _("Story"); ?> <i title="<?php echo _("enables the story feature in the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_story" <?php echo ($map['enable_story']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_popup"><?php echo _("Popup"); ?> <i title="<?php echo _("display popup on hover over markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_popup" <?php echo ($map['enable_popup']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="sheet_detail"><?php echo _("Details Window"); ?> <i title="<?php echo _("opens the details window by clicking on markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="sheet_detail" <?php echo ($map['sheet_detail']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_directions"><?php echo _("Directions"); ?> <i title="<?php echo _("enable the button 'directions' for markers"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_directions" <?php echo ($map['enable_directions']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_popup_directions"><?php echo _("Directions - Popup"); ?> <i title="<?php echo _("enable the button 'directions' inside marker popup"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_popup_directions" <?php echo ($map['enable_popup_directions']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_share_map"><?php echo _("Share"); ?> <i title="<?php echo _("enable share buttons for map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_share_map" <?php echo ($map['enable_share_map']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <?php
                            $prefixes = [
                                    ['code' => '+93', 'country' => 'Afghanistan'], ['code' => '+355', 'country' => 'Albania'],
                                    ['code' => '+213', 'country' => 'Algeria'], ['code' => '+1684', 'country' => 'American Samoa'],
                                    ['code' => '+376', 'country' => 'Andorra'], ['code' => '+244', 'country' => 'Angola'],
                                    ['code' => '+1264', 'country' => 'Anguilla'], ['code' => '+672', 'country' => 'Antarctica'],
                                    ['code' => '+1268', 'country' => 'Antigua & Barbuda'], ['code' => '+54', 'country' => 'Argentina'],
                                    ['code' => '+374', 'country' => 'Armenia'], ['code' => '+297', 'country' => 'Aruba'],
                                    ['code' => '+61', 'country' => 'Australia'], ['code' => '+43', 'country' => 'Austria'],
                                    ['code' => '+994', 'country' => 'Azerbaijan'], ['code' => '+1242', 'country' => 'Bahamas'],
                                    ['code' => '+973', 'country' => 'Bahrain'], ['code' => '+880', 'country' => 'Bangladesh'],
                                    ['code' => '+1246', 'country' => 'Barbados'], ['code' => '+375', 'country' => 'Belarus'],
                                    ['code' => '+32', 'country' => 'Belgium'], ['code' => '+501', 'country' => 'Belize'],
                                    ['code' => '+229', 'country' => 'Benin'], ['code' => '+1441', 'country' => 'Bermuda'],
                                    ['code' => '+975', 'country' => 'Bhutan'], ['code' => '+591', 'country' => 'Bolivia'],
                                    ['code' => '+387', 'country' => 'Bosnia & Herzegovina'], ['code' => '+267', 'country' => 'Botswana'],
                                    ['code' => '+55', 'country' => 'Brazil'], ['code' => '+246', 'country' => 'British Indian Ocean Territory'],
                                    ['code' => '+1284', 'country' => 'British Virgin Islands'], ['code' => '+673', 'country' => 'Brunei'],
                                    ['code' => '+359', 'country' => 'Bulgaria'], ['code' => '+226', 'country' => 'Burkina Faso'],
                                    ['code' => '+257', 'country' => 'Burundi'], ['code' => '+855', 'country' => 'Cambodia'],
                                    ['code' => '+237', 'country' => 'Cameroon'], ['code' => '+1', 'country' => 'Canada'],
                                    ['code' => '+238', 'country' => 'Cape Verde'], ['code' => '+1345', 'country' => 'Cayman Islands'],
                                    ['code' => '+236', 'country' => 'Central African Republic'], ['code' => '+235', 'country' => 'Chad'],
                                    ['code' => '+56', 'country' => 'Chile'], ['code' => '+86', 'country' => 'China'],
                                    ['code' => '+61', 'country' => 'Christmas Island'], ['code' => '+61', 'country' => 'Cocos (Keeling) Islands'],
                                    ['code' => '+57', 'country' => 'Colombia'], ['code' => '+269', 'country' => 'Comoros'],
                                    ['code' => '+243', 'country' => 'Congo (DRC)'], ['code' => '+242', 'country' => 'Congo (Republic)'],
                                    ['code' => '+682', 'country' => 'Cook Islands'], ['code' => '+506', 'country' => 'Costa Rica'],
                                    ['code' => '+385', 'country' => 'Croatia'], ['code' => '+53', 'country' => 'Cuba'],
                                    ['code' => '+599', 'country' => 'Curaçao'], ['code' => '+357', 'country' => 'Cyprus'],
                                    ['code' => '+420', 'country' => 'Czech Republic'], ['code' => '+225', 'country' => 'Côte d\'Ivoire'],
                                    ['code' => '+45', 'country' => 'Denmark'], ['code' => '+253', 'country' => 'Djibouti'],
                                    ['code' => '+1767', 'country' => 'Dominica'], ['code' => '+1', 'country' => 'Dominican Republic'],
                                    ['code' => '+593', 'country' => 'Ecuador'], ['code' => '+20', 'country' => 'Egypt'],
                                    ['code' => '+503', 'country' => 'El Salvador'], ['code' => '+240', 'country' => 'Equatorial Guinea'],
                                    ['code' => '+291', 'country' => 'Eritrea'], ['code' => '+372', 'country' => 'Estonia'],
                                    ['code' => '+268', 'country' => 'Eswatini (Swaziland)'], ['code' => '+251', 'country' => 'Ethiopia'],
                                    ['code' => '+500', 'country' => 'Falkland Islands'], ['code' => '+298', 'country' => 'Faroe Islands'],
                                    ['code' => '+679', 'country' => 'Fiji'], ['code' => '+358', 'country' => 'Finland'],
                                    ['code' => '+33', 'country' => 'France'], ['code' => '+594', 'country' => 'French Guiana'],
                                    ['code' => '+689', 'country' => 'French Polynesia'], ['code' => '+241', 'country' => 'Gabon'],
                                    ['code' => '+220', 'country' => 'Gambia'], ['code' => '+995', 'country' => 'Georgia'],
                                    ['code' => '+49', 'country' => 'Germany'], ['code' => '+233', 'country' => 'Ghana'],
                                    ['code' => '+350', 'country' => 'Gibraltar'], ['code' => '+30', 'country' => 'Greece'],
                                    ['code' => '+299', 'country' => 'Greenland'], ['code' => '+1473', 'country' => 'Grenada'],
                                    ['code' => '+590', 'country' => 'Guadeloupe'], ['code' => '+1671', 'country' => 'Guam'],
                                    ['code' => '+502', 'country' => 'Guatemala'], ['code' => '+44-1481', 'country' => 'Guernsey'],
                                    ['code' => '+224', 'country' => 'Guinea'], ['code' => '+245', 'country' => 'Guinea-Bissau'],
                                    ['code' => '+592', 'country' => 'Guyana'], ['code' => '+509', 'country' => 'Haiti'],
                                    ['code' => '+504', 'country' => 'Honduras'], ['code' => '+852', 'country' => 'Hong Kong'],
                                    ['code' => '+36', 'country' => 'Hungary'], ['code' => '+354', 'country' => 'Iceland'],
                                    ['code' => '+91', 'country' => 'India'], ['code' => '+62', 'country' => 'Indonesia'],
                                    ['code' => '+98', 'country' => 'Iran'], ['code' => '+964', 'country' => 'Iraq'],
                                    ['code' => '+353', 'country' => 'Ireland'], ['code' => '+44-1624', 'country' => 'Isle of Man'],
                                    ['code' => '+972', 'country' => 'Israel'], ['code' => '+39', 'country' => 'Italy'],
                                    ['code' => '+1876', 'country' => 'Jamaica'], ['code' => '+81', 'country' => 'Japan'],
                                    ['code' => '+44-1534', 'country' => 'Jersey'], ['code' => '+962', 'country' => 'Jordan'],
                                    ['code' => '+7', 'country' => 'Kazakhstan'], ['code' => '+254', 'country' => 'Kenya'],
                                    ['code' => '+686', 'country' => 'Kiribati'], ['code' => '+383', 'country' => 'Kosovo'],
                                    ['code' => '+965', 'country' => 'Kuwait'], ['code' => '+996', 'country' => 'Kyrgyzstan'],
                                    ['code' => '+856', 'country' => 'Laos'], ['code' => '+371', 'country' => 'Latvia'],
                                    ['code' => '+961', 'country' => 'Lebanon'], ['code' => '+266', 'country' => 'Lesotho'],
                                    ['code' => '+231', 'country' => 'Liberia'], ['code' => '+218', 'country' => 'Libya'],
                                    ['code' => '+423', 'country' => 'Liechtenstein'], ['code' => '+370', 'country' => 'Lithuania'],
                                    ['code' => '+352', 'country' => 'Luxembourg'], ['code' => '+853', 'country' => 'Macau'],
                                    ['code' => '+261', 'country' => 'Madagascar'], ['code' => '+265', 'country' => 'Malawi'],
                                    ['code' => '+60', 'country' => 'Malaysia'], ['code' => '+960', 'country' => 'Maldives'],
                                    ['code' => '+223', 'country' => 'Mali'], ['code' => '+356', 'country' => 'Malta'],
                                    ['code' => '+692', 'country' => 'Marshall Islands'], ['code' => '+596', 'country' => 'Martinique'],
                                    ['code' => '+222', 'country' => 'Mauritania'], ['code' => '+230', 'country' => 'Mauritius'],
                                    ['code' => '+262', 'country' => 'Mayotte'], ['code' => '+52', 'country' => 'Mexico'],
                                    ['code' => '+691', 'country' => 'Micronesia'], ['code' => '+373', 'country' => 'Moldova'],
                                    ['code' => '+377', 'country' => 'Monaco'], ['code' => '+976', 'country' => 'Mongolia'],
                                    ['code' => '+382', 'country' => 'Montenegro'], ['code' => '+1664', 'country' => 'Montserrat'],
                                    ['code' => '+212', 'country' => 'Morocco'], ['code' => '+258', 'country' => 'Mozambique'],
                                    ['code' => '+95', 'country' => 'Myanmar (Burma)'], ['code' => '+264', 'country' => 'Namibia'],
                                    ['code' => '+674', 'country' => 'Nauru'], ['code' => '+977', 'country' => 'Nepal'],
                                    ['code' => '+31', 'country' => 'Netherlands'], ['code' => '+599', 'country' => 'Netherlands Antilles'],
                                    ['code' => '+687', 'country' => 'New Caledonia'], ['code' => '+64', 'country' => 'New Zealand'],
                                    ['code' => '+505', 'country' => 'Nicaragua'], ['code' => '+227', 'country' => 'Niger'],
                                    ['code' => '+234', 'country' => 'Nigeria'], ['code' => '+683', 'country' => 'Niue'],
                                    ['code' => '+672', 'country' => 'Norfolk Island'], ['code' => '+850', 'country' => 'North Korea'],
                                    ['code' => '+389', 'country' => 'North Macedonia'], ['code' => '+1670', 'country' => 'Northern Mariana Islands'],
                                    ['code' => '+47', 'country' => 'Norway'], ['code' => '+968', 'country' => 'Oman'],
                                    ['code' => '+92', 'country' => 'Pakistan'], ['code' => '+680', 'country' => 'Palau'],
                                    ['code' => '+970', 'country' => 'Palestine'], ['code' => '+507', 'country' => 'Panama'],
                                    ['code' => '+675', 'country' => 'Papua New Guinea'], ['code' => '+595', 'country' => 'Paraguay'],
                                    ['code' => '+51', 'country' => 'Peru'], ['code' => '+63', 'country' => 'Philippines'],
                                    ['code' => '+870', 'country' => 'Pitcairn Islands'], ['code' => '+48', 'country' => 'Poland'],
                                    ['code' => '+351', 'country' => 'Portugal'], ['code' => '+1', 'country' => 'Puerto Rico'],
                                    ['code' => '+974', 'country' => 'Qatar'], ['code' => '+40', 'country' => 'Romania'],
                                    ['code' => '+7', 'country' => 'Russia'], ['code' => '+250', 'country' => 'Rwanda'],
                                    ['code' => '+262', 'country' => 'Réunion'], ['code' => '+590', 'country' => 'Saint Barthélemy'],
                                    ['code' => '+290', 'country' => 'Saint Helena'], ['code' => '+1869', 'country' => 'Saint Kitts & Nevis'],
                                    ['code' => '+1758', 'country' => 'Saint Lucia'], ['code' => '+590', 'country' => 'Saint Martin'],
                                    ['code' => '+508', 'country' => 'Saint Pierre & Miquelon'], ['code' => '+1784', 'country' => 'Saint Vincent & Grenadines'],
                                    ['code' => '+685', 'country' => 'Samoa'], ['code' => '+378', 'country' => 'San Marino'],
                                    ['code' => '+239', 'country' => 'São Tomé & Príncipe'], ['code' => '+966', 'country' => 'Saudi Arabia'],
                                    ['code' => '+221', 'country' => 'Senegal'], ['code' => '+381', 'country' => 'Serbia'],
                                    ['code' => '+248', 'country' => 'Seychelles'], ['code' => '+232', 'country' => 'Sierra Leone'],
                                    ['code' => '+65', 'country' => 'Singapore'], ['code' => '+1721', 'country' => 'Sint Maarten'],
                                    ['code' => '+421', 'country' => 'Slovakia'], ['code' => '+386', 'country' => 'Slovenia'],
                                    ['code' => '+677', 'country' => 'Solomon Islands'], ['code' => '+252', 'country' => 'Somalia'],
                                    ['code' => '+27', 'country' => 'South Africa'], ['code' => '+82', 'country' => 'South Korea'],
                                    ['code' => '+211', 'country' => 'South Sudan'], ['code' => '+34', 'country' => 'Spain'],
                                    ['code' => '+94', 'country' => 'Sri Lanka'], ['code' => '+249', 'country' => 'Sudan'],
                                    ['code' => '+597', 'country' => 'Suriname'], ['code' => '+47', 'country' => 'Svalbard & Jan Mayen'],
                                    ['code' => '+46', 'country' => 'Sweden'], ['code' => '+41', 'country' => 'Switzerland'],
                                    ['code' => '+963', 'country' => 'Syria'], ['code' => '+886', 'country' => 'Taiwan'],
                                    ['code' => '+992', 'country' => 'Tajikistan'], ['code' => '+255', 'country' => 'Tanzania'],
                                    ['code' => '+66', 'country' => 'Thailand'], ['code' => '+670', 'country' => 'Timor-Leste'],
                                    ['code' => '+228', 'country' => 'Togo'], ['code' => '+690', 'country' => 'Tokelau'],
                                    ['code' => '+676', 'country' => 'Tonga'], ['code' => '+1868', 'country' => 'Trinidad & Tobago'],
                                    ['code' => '+216', 'country' => 'Tunisia'], ['code' => '+90', 'country' => 'Turkey'],
                                    ['code' => '+993', 'country' => 'Turkmenistan'], ['code' => '+1649', 'country' => 'Turks & Caicos Islands'],
                                    ['code' => '+688', 'country' => 'Tuvalu'], ['code' => '+256', 'country' => 'Uganda'],
                                    ['code' => '+380', 'country' => 'Ukraine'], ['code' => '+971', 'country' => 'United Arab Emirates'],
                                    ['code' => '+44', 'country' => 'United Kingdom'], ['code' => '+1', 'country' => 'United States'],
                                    ['code' => '+598', 'country' => 'Uruguay'], ['code' => '+1', 'country' => 'US Virgin Islands'],
                                    ['code' => '+998', 'country' => 'Uzbekistan'], ['code' => '+678', 'country' => 'Vanuatu'],
                                    ['code' => '+379', 'country' => 'Vatican City'], ['code' => '+58', 'country' => 'Venezuela'],
                                    ['code' => '+84', 'country' => 'Vietnam'], ['code' => '+681', 'country' => 'Wallis & Futuna'],
                                    ['code' => '+967', 'country' => 'Yemen'], ['code' => '+260', 'country' => 'Zambia'],
                                    ['code' => '+263', 'country' => 'Zimbabwe'],
                            ];
                            ?>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="default_prefix"><?php echo _("Default Phone Prefix"); ?> <i title="<?php echo _("automatically set the prefix in the telephone and whatsapp fields"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="default_prefix" class="form-control">
                                        <option <?php echo ($map['default_prefix']=='no') ? 'selected' : ''; ?> id="no"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo (empty($map['default_prefix'])) ? 'selected' : ''; ?> id=""><?php echo _("Not set"); ?></option>
                                        <?php foreach ($prefixes as $prefix) {
                                            echo '<option '.(($map['default_prefix']==$prefix['code']) ? 'selected' : '').' id="'.$prefix['code'].'">'.$prefix['country'].' ('.$prefix['code'].')</option>';
                                        } ?>
                                    </select>
                                </div>
                            </div>
                            <?php
                            $array_share_providers = explode(",",$map['share_providers']);
                            $array_share_providers_settings = explode(",",$settings['share_providers']);
                            ?>
                            <div class="col-md-3">
                                <label for="share_providers"><?php echo _("Share Providers"); ?></label><br>
                                <select id="share_providers" data-iconBase="fa" data-tickIcon="fa-check" data-actions-box="true" data-selected-text-format="count > 8" data-count-selected-text="{0} <?php echo _("items selected"); ?>" data-deselect-all-text="<?php echo _("Deselect All"); ?>" data-select-all-text="<?php echo _("Select All"); ?>" data-none-selected-text="<?php echo _("Nothing selected"); ?>" data-none-results-text="<?php echo _("No results matched"); ?> {0}" class="form-control selectpicker" multiple>
                                    <?php if(in_array('copy_link',$array_share_providers_settings)) : ?><option data-icon="fas fa-link" id="provider_copy_link" <?php echo (in_array('copy_link',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Copy Link"); ?></option><?php endif; ?>
                                    <?php if(in_array('email',$array_share_providers_settings)) : ?><option data-icon="fas fa-envelope" id="provider_email" <?php echo (in_array('email',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Email"); ?></option><?php endif; ?>
                                    <?php if(in_array('whatsapp',$array_share_providers_settings)) : ?><option data-icon="fab fa-whatsapp" id="provider_whatsapp" <?php echo (in_array('whatsapp',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Whatsapp"); ?></option><?php endif; ?>
                                    <?php if(in_array('facebook',$array_share_providers_settings)) : ?><option data-icon="fab fa-facebook" id="provider_facebook" <?php echo (in_array('facebook',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Facebook"); ?></option><?php endif; ?>
                                    <?php if(in_array('threads',$array_share_providers_settings)) : ?><option data-icon="fab fa-threads" id="provider_threads" <?php echo (in_array('threads',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Threads"); ?></option><?php endif; ?>
                                    <?php if(in_array('twitter',$array_share_providers_settings)) : ?><option data-icon="fab fa-x-twitter" id="provider_twitter" <?php echo (in_array('twitter',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Twitter"); ?></option><?php endif; ?>
                                    <?php if(in_array('linkedin',$array_share_providers_settings)) : ?><option data-icon="fab fa-linkedin" id="provider_linkedin" <?php echo (in_array('linkedin',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Linkedin"); ?></option><?php endif; ?>
                                    <?php if(in_array('telegram',$array_share_providers_settings)) : ?><option data-icon="fab fa-telegram" id="provider_telegram" <?php echo (in_array('telegram',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Telegram"); ?></option><?php endif; ?>
                                    <?php if(in_array('facebook_messenger',$array_share_providers_settings)) : ?><option data-icon="fab fa-facebook-messenger" id="provider_facebook_messenger" <?php echo (in_array('facebook_messenger',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Facebook Messenger"); ?></option><?php endif; ?>
                                    <?php if(in_array('pinterest',$array_share_providers_settings)) : ?><option data-icon="fab fa-pinterest" id="provider_pinterest" <?php echo (in_array('pinterest',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Pinterest"); ?></option><?php endif; ?>
                                    <?php if(in_array('reddit',$array_share_providers_settings)) : ?><option data-icon="fab fa-reddit" id="provider_reddit" <?php echo (in_array('reddit',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Reddit"); ?></option><?php endif; ?>
                                    <?php if(in_array('line',$array_share_providers_settings)) : ?><option data-icon="fab fa-line" id="provider_line" <?php echo (in_array('line',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Line"); ?></option><?php endif; ?>
                                    <?php if(in_array('viber',$array_share_providers_settings)) : ?><option data-icon="fab fa-viber" id="provider_viber" <?php echo (in_array('viber',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Viber"); ?></option><?php endif; ?>
                                    <?php if(in_array('vk',$array_share_providers_settings)) : ?><option data-icon="fab fa-vk" id="provider_vk" <?php echo (in_array('vk',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("VK"); ?></option><?php endif; ?>
                                    <?php if(in_array('qzone',$array_share_providers_settings)) : ?><option data-icon="fab fa-qq" id="provider_qzone" <?php echo (in_array('qzone',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Qzone"); ?></option><?php endif; ?>
                                    <?php if(in_array('wechat',$array_share_providers_settings)) : ?><option data-icon="fab fa-weixin" id="provider_wechat" <?php echo (in_array('wechat',$array_share_providers) ? 'selected' : ''); ?>><?php echo _("Wechat"); ?></option><?php endif; ?>
                                </select>
                            </div>
                            <script type="text/javascript">$('#share_providers').selectpicker('render');</script>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="direction_map"><?php echo _("Directions Map Provider"); ?> <i title="<?php echo _("when you click 'get directions' on the marker you will use this provider to get directions"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="direction_map" class="form-control">
                                        <option <?php echo (empty($settings['openrouteservice_api_key'])) ? 'disabled' : ''; ?> <?php echo ($map['direction_map']=='openrouteservice') ? 'selected' : ''; ?> id="openrouteservice">Openroute Service (<?php echo _("built-in"); ?>)</option>
                                        <option <?php echo ($map['direction_map']=='google') ? 'selected' : ''; ?> id="google">Google</option>
                                        <option <?php echo ($map['direction_map']=='bing') ? 'selected' : ''; ?> id="bing">Bing</option>
                                        <option <?php echo ($map['direction_map']=='baidu') ? 'selected' : ''; ?> id="baidu">Baidu</option>
                                        <option <?php echo ($map['direction_map']=='yandex') ? 'selected' : ''; ?> id="yandex">Yandex</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="streetview_map"><?php echo _("Streetview Map Provider"); ?> <i title="<?php echo _("when you click 'street view' on the marker you will use this provider to get the street view"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="streetview_map" class="form-control">
                                        <option <?php echo ($map['streetview_map']=='google') ? 'selected' : ''; ?> id="google">Google</option>
                                        <option <?php echo ($map['streetview_map']=='bing') ? 'selected' : ''; ?> id="bing">Bing</option>
                                        <option <?php echo ($map['streetview_map']=='yandex') ? 'selected' : ''; ?> id="yandex">Yandex</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="sheet_mobile"><?php echo _("Mobile Marker Sheets"); ?> <i title="<?php echo _("displays marker's detail window reduced or opened on mobile"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="sheet_mobile" class="form-control">
                                        <option <?php echo ($map['sheet_mobile']=='reduced') ? 'selected' : ''; ?> id="reduced"><?php echo _("Collapsed"); ?></option>
                                        <option <?php echo ($map['sheet_mobile']=='opened') ? 'selected' : ''; ?> id="opened"><?php echo _("Opened"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="default_zoom"><?php echo _("Initial Zoom"); ?> <i title="<?php echo _("initial zoom when the map is loaded (1 far - 20 near)"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <select id="default_zoom" class="form-control">
                                        <option <?php echo ($map['default_zoom']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Fit Markers"); ?></option>
                                        <?php
                                        for($i=1;$i<=20;$i++) {
                                            if($map['default_zoom']==$i) {
                                                echo "<option selected id='$i'>$i</option>";
                                            } else {
                                                echo "<option id='$i'>$i</option>";
                                            }
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="selected_zoom"><?php echo _("Marker Zoom"); ?> <i title="<?php echo _("zoom level when the marker is clicked (1 far - 20 near)"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <select id="selected_zoom" class="form-control">
                                        <option <?php echo ($map['selected_zoom']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Keep Zoom level"); ?></option>
                                        <?php
                                        for($i=1;$i<=20;$i++) {
                                            if($map['selected_zoom']==$i) {
                                                echo "<option selected id='$i'>$i</option>";
                                            } else {
                                                echo "<option id='$i'>$i</option>";
                                            }
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="duration_zoom"><?php echo _("Animation Zoom"); ?> <i title="<?php echo _("zoom animation duration in ms"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="duration_zoom" value="<?php echo $map['duration_zoom']; ?>">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">ms</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="marker_sel_zoom"><?php echo _("Marker Scale (direct link)"); ?> <i title="<?php echo _("marker scale level accessed via direct link"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <select id="marker_sel_zoom" class="form-control">
                                        <?php
                                        for($i=10;$i<=30;$i++) {
                                            $k = $i / 10;
                                            if($map['marker_sel_zoom']==$k) {
                                                echo "<option selected id='$k'>$k</option>";
                                            } else {
                                                echo "<option id='$k'>$k</option>";
                                            }
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="weather"><?php echo _("Weather"); ?></label><br>
                                    <select id="weather" class="form-control">
                                        <option <?php echo ($map['weather']=='none') ? 'selected' : ''; ?> id="none"><?php echo _("None"); ?></option>
                                        <option <?php echo ($map['weather']=='celsius') ? 'selected' : ''; ?> id="celsius"><?php echo _("Celsius"); ?></option>
                                        <option <?php echo ($map['weather']=='fahrenheit') ? 'selected' : ''; ?> id="fahrenheit"><?php echo _("Fahrenheit"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="wake_lock"><?php echo _("Wake Lock"); ?> <i title="<?php echo _("set wake lock to prevent the screen from turning off"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="wake_lock" class="form-control">
                                        <option <?php echo ($map['wake_lock']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['wake_lock']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled"); ?></option>
                                        <option <?php echo ($map['wake_lock']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (only on live tracking)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="ga_tracking_id"><?php echo _("Google Analytics"); ?> <i title="<?php echo _("Google Analytics Tracking ID. Note: Use the Friendly URL in Google Analytics's property url setting."); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="text" class="form-control" id="ga_tracking_id" value="<?php echo $map['ga_tracking_id']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="show_legal"><?php echo _("Show Legal links"); ?></label><br>
                                    <input type="checkbox" id="show_legal" <?php echo ($map['show_legal'])?'checked':''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="cookie_consent"><?php echo _("Cookie Consent"); ?></label><br>
                                    <input type="checkbox" id="cookie_consent" <?php echo ($map['cookie_consent'])?'checked':''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3 <?php echo (!$settings['pwa_enable']) ? 'd-none' : ''; ?>">
                                <div class="form-group">
                                    <label for="pwa_enable">PWA</label><br>
                                    <input type="checkbox" id="pwa_enable" <?php echo ($map['pwa_enable'])?'checked':''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="include_sitemap"><?php echo _("Sitemap"); ?> <i title="<?php echo _("Include this map in the sitemap file to be indexed by search engines"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="include_sitemap" <?php echo ($map['include_sitemap'])?'checked':''; ?> />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="quality_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-gauge-high"></i> <?php echo _("Map Rendering Quality"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="quality_preset"><?php echo _("Quality Preset"); ?> <i title="<?php echo _("Select a preset to auto-fill the options below, or customize them manually."); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <select id="quality_preset" class="form-control" onchange="apply_quality_preset()">
                                        <option value="custom" <?php echo ($map['quality_preset']=='custom') ? 'selected' : ''; ?>><?php echo _("Custom"); ?></option>
                                        <option value="low" <?php echo ($map['quality_preset']=='low') ? 'selected' : ''; ?>><?php echo _("Low"); ?></option>
                                        <option value="medium" <?php echo ($map['quality_preset']=='medium') ? 'selected' : ''; ?>><?php echo _("Medium"); ?></option>
                                        <option value="high" <?php echo ($map['quality_preset']=='high') ? 'selected' : ''; ?>><?php echo _("High"); ?></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-4">
                                <h6 class="font-weight-bold"><?php echo _("Resolution"); ?></h6>
                                <div class="form-group">
                                    <select id="quality_resolution" class="form-control" onchange="set_quality_custom()">
                                        <option value="low" <?php echo ($map['quality_resolution']=='low') ? 'selected' : ''; ?>><?php echo _("Low"); ?></option>
                                        <option value="medium" <?php echo ($map['quality_resolution']=='medium') ? 'selected' : ''; ?>><?php echo _("Medium"); ?></option>
                                        <option value="high" <?php echo ($map['quality_resolution']=='high') ? 'selected' : ''; ?>><?php echo _("High"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h6 class="font-weight-bold"><?php echo _("Interactions & Animations"); ?></h6>
                                <div class="form-group mt-3 mb-1">
                                    <label><input type="checkbox" id="update_while_animating" onchange="set_quality_custom()" <?php echo ($map['update_while_animating']) ? 'checked' : ''; ?> /> <?php echo _("Update While Animating"); ?></label>
                                </div>
                                <div class="form-group mb-1">
                                    <label><input type="checkbox" id="update_while_interacting" onchange="set_quality_custom()" <?php echo ($map['update_while_interacting']) ? 'checked' : ''; ?> /> <?php echo _("Update While Interacting"); ?></label>
                                </div>
                                <div class="form-group mb-1">
                                    <label><input type="checkbox" id="load_tiles_while_animating" onchange="set_quality_custom()" <?php echo ($map['load_tiles_while_animating']) ? 'checked' : ''; ?> /> <?php echo _("Load Tiles While Animating"); ?></label>
                                </div>
                                <div class="form-group mb-1">
                                    <label><input type="checkbox" id="load_tiles_while_interacting" onchange="set_quality_custom()" <?php echo ($map['load_tiles_while_interacting']) ? 'checked' : ''; ?> /> <?php echo _("Load Tiles While Interacting"); ?></label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h6 class="font-weight-bold"><?php echo _("Buffers & Preloading"); ?></h6>
                                <div class="form-group mt-3">
                                    <label for="preload_tiles"><?php echo _("Preload Tiles"); ?> (<span id="preload_tiles_val"><?php echo isset($map['preload_tiles']) ? $map['preload_tiles'] : 5; ?></span>)</label>
                                    <input type="range" class="form-control-range" id="preload_tiles" min="0" max="10" step="1" value="<?php echo isset($map['preload_tiles']) ? $map['preload_tiles'] : 5; ?>" oninput="$('#preload_tiles_val').text(this.value); set_quality_custom();" />
                                </div>
                                <div class="form-group mt-4">
                                    <label for="render_buffer"><?php echo _("Render Buffer"); ?> (<span id="render_buffer_val"><?php echo isset($map['render_buffer']) ? $map['render_buffer'] : 100; ?></span>)</label>
                                    <input type="range" class="form-control-range" id="render_buffer" min="0" max="200" step="10" value="<?php echo isset($map['render_buffer']) ? $map['render_buffer'] : 100; ?>" oninput="$('#render_buffer_val').text(this.value); set_quality_custom();" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="list_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="enable_list"><?php echo _("Enable"); ?> <i title="<?php echo _("enables the list of markers in the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_list" <?php echo ($map['enable_list']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="show_list"><?php echo _("Auto show"); ?> <i title="<?php echo _("automatically open the marker's list at first map loading"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="show_list" class="form-control">
                                        <option <?php echo ($map['show_list']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['show_list']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled (Desktop and Mobile)"); ?></option>
                                        <option <?php echo ($map['show_list']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (Only on Desktop)"); ?></option>
                                        <option <?php echo ($map['show_list']==3) ? 'selected' : ''; ?> id="3"><?php echo _("Enabled (Only on Mobile)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="limit_list"><?php echo _("Limit list"); ?> <i title="<?php echo _("limits the number of markers showed in the list (-1 = no limit)"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="number" min="-1" id="limit_list" class="form-control" value="<?php echo $map['limit_list']; ?>" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="search_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="enable_search"><?php echo _("Enable Search"); ?> <i title="<?php echo _("enable the search box in the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_search" <?php echo ($map['enable_search']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="enable_search_location"><?php echo _("Search Locations"); ?> <i title="<?php echo _("enables the search for a location / city"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="enable_search_location" <?php echo ($map['enable_search_location']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="order_by_distance"><?php echo _("Order By distance"); ?> <i title="<?php echo _("markers are sorted by distance from the current position"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="order_by_distance" <?php echo ($map['order_by_distance']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="order_by"><?php echo _("Markers Order by"); ?></label><br>
                                    <select id="order_by" class="form-control">
                                        <option <?php echo ($map['order_by']=='priority') ? 'selected' : ''; ?> id="priority"><?php echo _("Priority"); ?></option>
                                        <option <?php echo ($map['order_by']=='name') ? 'selected' : ''; ?> id="name"><?php echo _("Name"); ?></option>
                                        <option <?php echo ($map['order_by']=='city') ? 'selected' : ''; ?> id="city"><?php echo _("City"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="search_highlight"><?php echo _("Highlight Markers Position"); ?> <i title="<?php echo _("highlights the position of the marker when you hover over the search results (1 far - 20 near)"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <select id="search_highlight" class="form-control">
                                        <option <?php echo ($map['search_highlight']==-1) ? 'selected' : ''; ?> id="-1"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['search_highlight']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Keep Zoom level"); ?></option>
                                        <?php
                                        for($i=1;$i<=20;$i++) {
                                            if($map['search_highlight']==$i) {
                                                echo "<option selected id='$i'>$i</option>";
                                            } else {
                                                echo "<option id='$i'>$i</option>";
                                            }
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-circle-dot"></i> <?php echo _("Search Radius"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="search_radius_enabled"><?php echo _("Enable"); ?> <i title="<?php echo _("enables the ability to change the search radius of your location"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="search_radius_enabled" <?php echo ($map['search_radius_enabled']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="form-group">
                                    <label for="search_radius_m"><?php echo _("Default Radius Size"); ?> (<span id="search_radius_m_value"><?php echo ($map['search_radius_m']==-1) ? '<i class="fa-solid fa-infinity"></i>' : (($map['unit_map']=='km') ? ($map['search_radius_m']/1000)." km" : (number_format((($map['search_radius_m']/1000)/1.609),2)." ml")); ?></span>)</label><br>
                                    <input oninput="change_search_radius_m();" onchange="change_search_radius_m();" type="range" step="1000" min="0" max="100000" class="form-control-range" id="search_radius_m" value="<?php echo $map['search_radius_m']; ?>" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-map-marker-alt"></i> <?php echo _("Highlight Markers Search"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="pin_marker_enable"><?php echo _("Enable"); ?> <i title="<?php echo _("enables placement of a marker when hovering over search results"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="checkbox" id="pin_marker_enable" <?php echo ($map['pin_marker_enable']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label><?php echo _("Icon Type"); ?></label>
                                    <select id="pin_icon_type" onchange="change_pin_icon_type();" class="form-control">
                                        <option <?php echo ($map['pin_marker_icon']=='' && $map['pin_marker_icon_image']=='') ? 'selected' : '' ; ?> id="0"><?php echo _("Circle"); ?></option>
                                        <option <?php echo ($map['pin_marker_icon']!='' && $map['pin_marker_icon_image']=='') ? 'selected' : '' ; ?> id="1"><?php echo _("Icon"); ?></option>
                                        <option <?php echo ($map['pin_marker_icon_image']!='') ? 'selected' : '' ; ?> id="2"><?php echo _("Icon Library"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div id="pin_icon_type_1" class="col-md-4 <?php echo ($map['pin_marker_icon']!='' && $map['pin_marker_icon_image']=='') ? '' : 'd-none' ; ?>">
                                <div class="form-group">
                                    <label><?php echo _("Icon"); ?></label><br>
                                    <button class="btn btn-sm btn-primary" type="button" id="GetIconPicker_pin" data-iconpicker-input="input#marker_icon_input_pin" data-iconpicker-preview="i#marker_icon_pin"><?php echo _("Select Icon"); ?></button>
                                    <input readonly type="text" id="marker_icon_input_pin" name="Icon" value="<?php echo $map['pin_marker_icon']; ?>" required="" placeholder="" autocomplete="off" spellcheck="false">
                                    <div class="icon-preview d-inline-block ml-1" data-toggle="tooltip" title="">
                                        <i id="marker_icon_pin" class="<?php echo $map['pin_marker_icon']; ?>"></i>
                                    </div>
                                </div>
                            </div>
                            <div id="pin_icon_type_2" class="col-md-4 <?php echo ($map['pin_marker_icon_image']!='') ? '' : 'd-none' ; ?>">
                                <div class="form-group">
                                    <label for="marker_library_icon_pin"><?php echo _("Icon"); ?></label><br>
                                    <button data-toggle="modal" data-target="#modal_library_icons_pin" class="btn btn-sm btn-primary" type="button" id="btn_library_icon_pin"><?php echo _("Select Library Icon"); ?></button>
                                    <input type="hidden" id="marker_library_icon_pin" value="<?php echo $map['pin_marker_id_icon_library']; ?>">
                                    <img id="marker_library_icon_preview_pin" style="height: 30px;display: <?php echo ($map['pin_marker_icon_image']=='') ? 'none':'inline-block'; ?>" src="../viewer/icons/<?php echo $map['pin_marker_icon_image']; ?>">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="pin_marker_size"><?php echo _("Size"); ?> (<span id="pin_marker_size_value"><?php echo $map['pin_marker_size']; ?></span>)</label><br>
                                    <input oninput="change_pin_marker_size();" onchange="change_pin_marker_size();" type="range" step="0.1" min="0.1" max="2.0" class="form-control-range" id="pin_marker_size" value="<?php echo $map['pin_marker_size']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label><?php echo _("Alignment"); ?></label>
                                    <select id="pin_marker_align" class="form-control">
                                        <option <?php echo ($map['pin_marker_align']=='bottom') ? 'selected' : '' ; ?> id="bottom"><?php echo _("Bottom"); ?></option>
                                        <option <?php echo ($map['pin_marker_align']=='middle') ? 'selected' : '' ; ?> id="middle"><?php echo _("Middle"); ?></option>
                                        <option <?php echo ($map['pin_marker_align']=='top') ? 'selected' : '' ; ?> id="top"><?php echo _("Top"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group <?php echo ($map['pin_marker_icon_image']!='') ? 'disabled':''; ?>">
                                    <label><?php echo _("Background"); ?></label>
                                    <input type="text" class="form-control" id="pin_color_hex" value="<?php echo $map['pin_marker_color_hex']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group <?php echo ($map['pin_marker_icon_image']!='' || ($map['pin_marker_icon']=='' && $map['pin_marker_icon_image']=='')) ? 'disabled':''; ?>">
                                    <label><?php echo _("Color"); ?></label>
                                    <input type="text" class="form-control" id="pin_icon_color_hex" value="<?php echo $map['pin_marker_icon_color_hex']; ?>" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="add_markers_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-gear"></i> <?php echo _("Settings"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="enable_add_marker"><?php echo _("Add Markers from Map"); ?> <i title="<?php echo _("enables adding markers directly from the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="enable_add_marker" class="form-control">
                                        <option <?php echo ($map['enable_add_marker']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['enable_add_marker']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled"); ?></option>
                                        <option <?php echo ($map['enable_add_marker']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (Automatic Approval)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="add_markers_countries_allowed"><?php echo _("Countries allowed"); ?> <i title="<?php echo _("Limits the countries in which markers can be added from the map (none selected = no limit)"); ?>" class="help_t fas fa-question-circle"></i></label>
                                    <?php
                                    $file_path = '../viewer/countries/countries.geojson';
                                    $raw_content = file_get_contents($file_path);
                                    $countries = [];
                                    if ($raw_content !== false) {
                                        preg_match_all('/"name":\s*"([^"]+)"/', $raw_content, $matches);
                                        if (!empty($matches[1]) && count($matches[1]) > 2) {
                                            $just_countries = array_slice($matches[1], 2);
                                            $countries = array_unique($just_countries);
                                            sort($countries);
                                        }
                                        unset($raw_content);
                                        unset($matches);
                                    }
                                    $saved_countries_array = json_decode($map['add_markers_countries_allowed'], true);
                                    if (!is_array($saved_countries_array)) {
                                        $saved_countries_array = [];
                                    }
                                    ?>
                                    <select multiple id="add_markers_countries_allowed" data-live-search="true" data-actions-box="true" data-selected-text-format="count > 3" class="form-control selectpicker">
                                        <?php
                                        foreach ($countries as $nome) {
                                            $selected_attr = in_array($nome, $saved_countries_array) ? 'selected' : '';
                                            echo '<option value="' . htmlspecialchars($nome, ENT_QUOTES) . '" ' . $selected_attr . '>' . htmlspecialchars($nome, ENT_QUOTES) . '</option>' . PHP_EOL;
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="categories"><?php echo _("Mandatory fields"); ?></label>
                                    <?php $add_marker_fields_mandatory = explode(",",$map['add_marker_fields_mandatory']); ?>
                                    <select multiple id="add_marker_fields_mandatory" data-live-search="true" data-actions-box="true" data-selected-text-format="count > 3" class="form-control selectpicker">
                                        <option value="categories" <?php echo in_array('categories', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Categories"); ?>
                                        </option>
                                        <option value="street" <?php echo in_array('street', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Address"); ?>
                                        </option>
                                        <option value="postal_code" <?php echo in_array('postal_code', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Postal Code"); ?>
                                        </option>
                                        <option value="city" <?php echo in_array('city', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("City"); ?>
                                        </option>
                                        <option value="county" <?php echo in_array('county', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("County"); ?>
                                        </option>
                                        <option value="state" <?php echo in_array('state', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("State / Province"); ?>
                                        </option>
                                        <option value="country" <?php echo in_array('country', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Country"); ?>
                                        </option>
                                        <option value="website" <?php echo in_array('website', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Website"); ?>
                                        </option>
                                        <option value="email" <?php echo in_array('email', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("E-Mail"); ?>
                                        </option>
                                        <option value="phone" <?php echo in_array('phone', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Phone"); ?>
                                        </option>
                                        <option value="whatsapp" <?php echo in_array('whatsapp', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Whatsapp"); ?>
                                        </option>
                                        <option value="description" <?php echo in_array('description', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Description"); ?>
                                        </option>
                                        <option value="hours" <?php echo in_array('hours', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Hours"); ?>
                                        </option>
                                        <option value="images" <?php echo in_array('images', $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                            <?php echo _("Images"); ?>
                                        </option>
                                        <?php for ($i = 1; $i <= 20; $i++): ?>
                                            <option value="field<?php echo $i; ?>" <?php echo in_array("field$i", $add_marker_fields_mandatory) ? 'selected' : ''; ?>>
                                                <?php echo _("Field")." ".$i; ?>
                                            </option>
                                        <?php endfor; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="add_marker_multiple_category"><?php echo _("Allow multiple categories"); ?></label><br>
                                    <input id="add_marker_multiple_category" type="checkbox" <?php echo ($map['add_marker_multiple_category']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-plus-circle"></i> <?php echo _("Fields Enabled"); ?> <?php echo print_language_input_selector($array_languages,$settings['language'],'default_am_placeholders'); ?></h6>
                    </div>
                    <div class="card-body">
                        <div id="add_markers_fields" class="row">
                            <div class="form-group">
                                <label><input type="checkbox" id="am_categories" <?php echo (array_key_exists('categories',$default_am_fields)) ? (($default_am_fields['categories']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Categories"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_street" <?php echo (array_key_exists('street',$default_am_fields)) ? (($default_am_fields['street']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Street"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_city" <?php echo (array_key_exists('city',$default_am_fields)) ? (($default_am_fields['city']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("City"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_state" <?php echo (array_key_exists('state',$default_am_fields)) ? (($default_am_fields['state']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("State"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_postal_code" <?php echo (array_key_exists('postal_code',$default_am_fields)) ? (($default_am_fields['postal_code']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Postal Code"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_county" <?php echo (array_key_exists('county',$default_am_fields)) ? (($default_am_fields['county']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("County"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_country" <?php echo (array_key_exists('country',$default_am_fields)) ? (($default_am_fields['country']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Country"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_website" <?php echo (array_key_exists('website',$default_am_fields)) ? (($default_am_fields['website']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Website"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_email" <?php echo (array_key_exists('email',$default_am_fields)) ? (($default_am_fields['email']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("E-Mail"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_phone" <?php echo (array_key_exists('phone',$default_am_fields)) ? (($default_am_fields['phone']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Phone"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_whatsapp" <?php echo (array_key_exists('whatsapp',$default_am_fields)) ? (($default_am_fields['whatsapp']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Whatsapp"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_description" <?php echo (array_key_exists('description',$default_am_fields)) ? (($default_am_fields['description']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Description"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_hours" <?php echo (array_key_exists('hours',$default_am_fields)) ? (($default_am_fields['hours']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Hours"); ?></label>
                            </div>
                            <div class="form-group">
                                <label><input type="checkbox" id="am_images" <?php echo (array_key_exists('images',$default_am_fields)) ? (($default_am_fields['images']==1) ? 'checked' : '') : 'checked'; ?> /> <?php echo _("Images"); ?></label>
                            </div>
                            <div style="width:100%;clear:both"></div>
                            <?php for($i=1;$i<=10;$i++) { ?>
                                <div class="form-group">
                                    <label><input type="checkbox" id="am_field_<?php echo $i; ?>" <?php echo (array_key_exists('field_'.$i,$default_am_fields)) ? (($default_am_fields['field_'.$i]==1) ? 'checked' : '') : ''; ?> /> <?php echo _("Field")." $i"; ?></label>
                                    <div style="width:160px;display:inline-block">
                                        <input type="text" id="am_placeholder_<?php echo $i; ?>" class="am_placeholder form-control form-control-sm" placeholder="<?php echo _("field name")." $i"; ?>" value="<?php echo (array_key_exists($i,$default_am_placeholders)) ? (!empty($default_am_placeholders[$i]) ? $default_am_placeholders[$i] : '') : ''; ?>" />
                                        <?php foreach ($array_languages as $lang) {
                                            if($lang!=$default_language) : ?>
                                                <input style="display:none;" id="am_placeholder_<?php echo $i; ?>_<?php echo $lang; ?>" type="text" class="form-control form-control-sm am_placeholder_lang input_lang" data-target-id="am_placeholder_<?php echo $i; ?>" data-lang="<?php echo $lang; ?>" value="<?php echo (array_key_exists($i,$default_am_placeholders_langs[$lang])) ? (!empty($default_am_placeholders_langs[$lang][$i]) ? $default_am_placeholders_langs[$lang][$i] : '') : ''; ?>" />
                                            <?php endif;
                                        } ?>
                                    </div>
                                </div>
                            <?php } ?>
                            <?php for($i=11;$i<=20;$i++) { ?>
                                <div class="form-group">
                                    <label><input type="checkbox" id="am_field_<?php echo $i; ?>" <?php echo (array_key_exists('field_'.$i,$default_am_fields)) ? (($default_am_fields['field_'.$i]==1) ? 'checked' : '') : ''; ?> /> <?php echo _("Field")." $i"; ?></label>
                                    <div style="width:160px;display:inline-block">
                                        <input type="text" id="am_placeholder_<?php echo $i; ?>" class="am_placeholder form-control form-control-sm" placeholder="<?php echo _("field name")." $i"; ?>" value="<?php echo (array_key_exists($i,$default_am_placeholders)) ? (!empty($default_am_placeholders[$i]) ? $default_am_placeholders[$i] : '') : ''; ?>" />
                                        <?php foreach ($array_languages as $lang) {
                                            if($lang!=$default_language) : ?>
                                                <input style="display:none;" id="am_placeholder_<?php echo $i; ?>_<?php echo $lang; ?>" type="text" class="form-control form-control-sm am_placeholder_lang input_lang" data-target-id="am_placeholder_<?php echo $i; ?>" data-lang="<?php echo $lang; ?>" value="<?php echo (array_key_exists($i,$default_am_placeholders_langs[$lang])) ? (!empty($default_am_placeholders_langs[$lang][$i]) ? $default_am_placeholders_langs[$lang][$i] : '') : ''; ?>" />
                                            <?php endif;
                                        } ?>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="style_tab">
        <div class="row">
            <div class="col-md-8 p-0">
                <div class="col-md-12">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-image"></i> <?php echo _("Logo"); ?></h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label><?php echo _("Logo (Desktop)"); ?></label>
                                        </div>
                                        <div style="display: none;" id="div_image_logo" class="col-md-12 mb-2">
                                            <img style="width: 100%;height: 90px;object-fit: contain;background: lightgray" src="../viewer/logos/<?php echo $map['logo']; ?>" />
                                        </div>
                                        <div style="display: none" id="div_delete_logo" class="col-md-12">
                                            <button <?php echo ($demo) ? 'disabled':''; ?> onclick="delete_logo();" class="btn btn-block btn-danger"><?php echo _("DELETE LOGO"); ?></button>
                                        </div>
                                        <div style="display: none" class="col-md-12" id="div_upload_logo">
                                            <form id="frm" action="ajax/upload_logo_image.php" method="POST" enctype="multipart/form-data">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <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_im"><?php echo _("Choose file"); ?></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <input <?php echo ($demo) ? 'disabled':''; ?> type="submit" class="btn btn-block btn-success" id="btnUpload" value="<?php echo _("Upload Logo 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>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label><?php echo _("Logo (Mobile)"); ?></label>
                                        </div>
                                        <div style="display: none;" id="div_image_logo_mobile" class="col-md-12 mb-2">
                                            <img style="width: 100%;height: 90px;object-fit: contain;background: lightgray" src="../viewer/logos/<?php echo $map['logo_mobile']; ?>" />
                                        </div>
                                        <div style="display: none" id="div_delete_logo_mobile" class="col-md-12">
                                            <button <?php echo ($demo) ? 'disabled':''; ?> onclick="delete_logo_mobile();" class="btn btn-block btn-danger"><?php echo _("DELETE LOGO"); ?></button>
                                        </div>
                                        <div style="display: none" class="col-md-12" id="div_upload_logo_mobile">
                                            <form id="frm_mobile" action="ajax/upload_logo_image.php" method="POST" enctype="multipart/form-data">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="input-group">
                                                            <div class="custom-file">
                                                                <input type="file" class="custom-file-input" id="txtFile_mobile" name="txtFile_mobile" />
                                                                <label class="custom-file-label" for="txtFile_im"><?php echo _("Choose file"); ?></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <input <?php echo ($demo) ? 'disabled':''; ?> type="submit" class="btn btn-block btn-success" id="btnUpload_mobile" value="<?php echo _("Upload Logo 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_mobile" 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_mobile"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="logo_height"><?php echo _("Height (Desktop)"); ?></label>
                                                <div class="input-group">
                                                    <input type="number" class="form-control" id="logo_height" value="<?php echo $map['logo_height']; ?>">
                                                    <div class="input-group-append">
                                                        <span class="input-group-text" id="basic-addon2">px</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="logo_height_mobile"><?php echo _("Height (Mobile)"); ?></label>
                                                <div class="input-group">
                                                    <input type="number" class="form-control" id="logo_height_mobile" value="<?php echo $map['logo_height_mobile']; ?>">
                                                    <div class="input-group-append">
                                                        <span class="input-group-text" id="basic-addon2">px</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="logo_link"><?php echo _("Link"); ?></label>
                                                <input type="tel" class="form-control" id="logo_link" value="<?php echo $map['logo_link']; ?>">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-map"></i> <?php echo _("Map - Street"); ?>&nbsp;&nbsp;&nbsp;<input onchange="change_enable_street();" style="vertical-align:middle" type="checkbox" id="enable_map_street" <?php echo ($map['enable_map_street']) ? 'checked' : ''; ?> /></h6>
                        </div>
                        <div class="card-body street_body <?php echo ($map['enable_map_street']) ? '' : 'disabled'; ?>">
                            <div class="row">
                                <div class="col-md-12">
                                    <label><?php echo _("Style"); ?></label>
                                    <ul class="nav bg-gray-100 nav-pills nav-fill mb-3">
                                        <li class="nav-item">
                                            <a onclick="change_street_style('default')" class="nav-link <?php echo ($map_style_sel=='default') ? 'active' : ''; ?>" data-toggle="pill" href="#map_default_tab"><?php echo strtoupper(_("DEFAULT")); ?></a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_street_style('openfreemap')" class="nav-link <?php echo ($map_style_sel=='openfreemap') ? 'active' : ''; ?>" data-toggle="pill" href="#map_openfreemap_tab">OPENFREEMAP</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_street_style('carto')" class="nav-link <?php echo ($map_style_sel=='carto') ? 'active' : ''; ?>" data-toggle="pill" href="#map_carto_tab">CARTO</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_street_style('stadia')" class="nav-link <?php echo ($map_style_sel=='stadia') ? 'active' : ''; ?>" data-toggle="pill" href="#map_stadia_tab">STADIA</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_street_style('maptiler')" class="nav-link <?php echo ($map_style_sel=='maptiler') ? 'active' : ''; ?>" data-toggle="pill" href="#map_maptiler_tab">MAPTILER</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_street_style('here')" class="nav-link <?php echo ($map_style_sel=='here') ? 'active' : ''; ?>" data-toggle="pill" href="#map_here_tab">HERE</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_street_style('google')" class="nav-link <?php echo ($map_style_sel=='google') ? 'active' : ''; ?>" data-toggle="pill" href="#map_google_tab">GOOGLE</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_street_style('custom')" class="nav-link <?php echo ($map_style_sel=='custom') ? 'active' : ''; ?>" data-toggle="pill" href="#map_custom_tab"><?php echo strtoupper(_("CUSTOM")); ?></a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane <?php echo ($map_style_sel=='google') ? 'active' : ''; ?>" id="map_google_tab">
                                            <div class="row">
                                                <div class="col-md-8 mb-1">
                                                    <div class="form-group">
                                                        <label for="google_api">Google API KEY</label>
                                                        <input type="text" class="form-control" id="google_api" value="<?php echo $map['google_api']; ?>" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-1">
                                                    <div class="form-group">
                                                        <label for="google_lang"><?php echo _("Language"); ?></label>
                                                        <select id="google_lang" class="form-control">
                                                            <option <?php echo (empty($map['google_lang'])) ? 'selected' : ''; ?> value=""><?php echo _("Default"); ?></option>
                                                            <option <?php echo ($map['google_lang'] == 'af') ? 'selected' : ''; ?> value="af">Afrikaans</option>
                                                            <option <?php echo ($map['google_lang'] == 'sq') ? 'selected' : ''; ?> value="sq">Albanian</option>
                                                            <option <?php echo ($map['google_lang'] == 'am') ? 'selected' : ''; ?> value="am">Amharic</option>
                                                            <option <?php echo ($map['google_lang'] == 'ar') ? 'selected' : ''; ?> value="ar">Arabic</option>
                                                            <option <?php echo ($map['google_lang'] == 'hy') ? 'selected' : ''; ?> value="hy">Armenian</option>
                                                            <option <?php echo ($map['google_lang'] == 'az') ? 'selected' : ''; ?> value="az">Azerbaijani</option>
                                                            <option <?php echo ($map['google_lang'] == 'eu') ? 'selected' : ''; ?> value="eu">Basque</option>
                                                            <option <?php echo ($map['google_lang'] == 'be') ? 'selected' : ''; ?> value="be">Belarusian</option>
                                                            <option <?php echo ($map['google_lang'] == 'bn') ? 'selected' : ''; ?> value="bn">Bengali</option>
                                                            <option <?php echo ($map['google_lang'] == 'bs') ? 'selected' : ''; ?> value="bs">Bosnian</option>
                                                            <option <?php echo ($map['google_lang'] == 'bg') ? 'selected' : ''; ?> value="bg">Bulgarian</option>
                                                            <option <?php echo ($map['google_lang'] == 'my') ? 'selected' : ''; ?> value="my">Burmese</option>
                                                            <option <?php echo ($map['google_lang'] == 'ca') ? 'selected' : ''; ?> value="ca">Catalan</option>
                                                            <option <?php echo ($map['google_lang'] == 'zh') ? 'selected' : ''; ?> value="zh">Chinese</option>
                                                            <option <?php echo ($map['google_lang'] == 'zh-CN') ? 'selected' : ''; ?> value="zh-CN">Chinese (Simplified)</option>
                                                            <option <?php echo ($map['google_lang'] == 'zh-HK') ? 'selected' : ''; ?> value="zh-HK">Chinese (Hong Kong)</option>
                                                            <option <?php echo ($map['google_lang'] == 'zh-TW') ? 'selected' : ''; ?> value="zh-TW">Chinese (Traditional)</option>
                                                            <option <?php echo ($map['google_lang'] == 'hr') ? 'selected' : ''; ?> value="hr">Croatian</option>
                                                            <option <?php echo ($map['google_lang'] == 'cs') ? 'selected' : ''; ?> value="cs">Czech</option>
                                                            <option <?php echo ($map['google_lang'] == 'da') ? 'selected' : ''; ?> value="da">Danish</option>
                                                            <option <?php echo ($map['google_lang'] == 'nl') ? 'selected' : ''; ?> value="nl">Dutch</option>
                                                            <option <?php echo ($map['google_lang'] == 'en') ? 'selected' : ''; ?> value="en">English</option>
                                                            <option <?php echo ($map['google_lang'] == 'en-AU') ? 'selected' : ''; ?> value="en-AU">English (Australian)</option>
                                                            <option <?php echo ($map['google_lang'] == 'en-GB') ? 'selected' : ''; ?> value="en-GB">English (Great Britain)</option>
                                                            <option <?php echo ($map['google_lang'] == 'et') ? 'selected' : ''; ?> value="et">Estonian</option>
                                                            <option <?php echo ($map['google_lang'] == 'fa') ? 'selected' : ''; ?> value="fa">Farsi</option>
                                                            <option <?php echo ($map['google_lang'] == 'fi') ? 'selected' : ''; ?> value="fi">Finnish</option>
                                                            <option <?php echo ($map['google_lang'] == 'fil') ? 'selected' : ''; ?> value="fil">Filipino</option>
                                                            <option <?php echo ($map['google_lang'] == 'fr') ? 'selected' : ''; ?> value="fr">French</option>
                                                            <option <?php echo ($map['google_lang'] == 'fr-CA') ? 'selected' : ''; ?> value="fr-CA">French (Canada)</option>
                                                            <option <?php echo ($map['google_lang'] == 'gl') ? 'selected' : ''; ?> value="gl">Galician</option>
                                                            <option <?php echo ($map['google_lang'] == 'ka') ? 'selected' : ''; ?> value="ka">Georgian</option>
                                                            <option <?php echo ($map['google_lang'] == 'de') ? 'selected' : ''; ?> value="de">German</option>
                                                            <option <?php echo ($map['google_lang'] == 'el') ? 'selected' : ''; ?> value="el">Greek</option>
                                                            <option <?php echo ($map['google_lang'] == 'gu') ? 'selected' : ''; ?> value="gu">Gujarati</option>
                                                            <option <?php echo ($map['google_lang'] == 'iw') ? 'selected' : ''; ?> value="iw">Hebrew</option>
                                                            <option <?php echo ($map['google_lang'] == 'hi') ? 'selected' : ''; ?> value="hi">Hindi</option>
                                                            <option <?php echo ($map['google_lang'] == 'hu') ? 'selected' : ''; ?> value="hu">Hungarian</option>
                                                            <option <?php echo ($map['google_lang'] == 'is') ? 'selected' : ''; ?> value="is">Icelandic</option>
                                                            <option <?php echo ($map['google_lang'] == 'id') ? 'selected' : ''; ?> value="id">Indonesian</option>
                                                            <option <?php echo ($map['google_lang'] == 'it') ? 'selected' : ''; ?> value="it">Italian</option>
                                                            <option <?php echo ($map['google_lang'] == 'ja') ? 'selected' : ''; ?> value="ja">Japanese</option>
                                                            <option <?php echo ($map['google_lang'] == 'kn') ? 'selected' : ''; ?> value="kn">Kannada</option>
                                                            <option <?php echo ($map['google_lang'] == 'kk') ? 'selected' : ''; ?> value="kk">Kazakh</option>
                                                            <option <?php echo ($map['google_lang'] == 'km') ? 'selected' : ''; ?> value="km">Khmer</option>
                                                            <option <?php echo ($map['google_lang'] == 'kn') ? 'selected' : ''; ?> value="kn">Kannada</option>
                                                            <option <?php echo ($map['google_lang'] == 'ko') ? 'selected' : ''; ?> value="ko">Korean</option>
                                                            <option <?php echo ($map['google_lang'] == 'ky') ? 'selected' : ''; ?> value="ky">Kyrgyz</option>
                                                            <option <?php echo ($map['google_lang'] == 'lo') ? 'selected' : ''; ?> value="lo">Lao</option>
                                                            <option <?php echo ($map['google_lang'] == 'lv') ? 'selected' : ''; ?> value="lv">Latvian</option>
                                                            <option <?php echo ($map['google_lang'] == 'lt') ? 'selected' : ''; ?> value="lt">Lithuanian</option>
                                                            <option <?php echo ($map['google_lang'] == 'mk') ? 'selected' : ''; ?> value="mk">Macedonian</option>
                                                            <option <?php echo ($map['google_lang'] == 'ms') ? 'selected' : ''; ?> value="ms">Malay</option>
                                                            <option <?php echo ($map['google_lang'] == 'ml') ? 'selected' : ''; ?> value="ml">Malayalam</option>
                                                            <option <?php echo ($map['google_lang'] == 'mr') ? 'selected' : ''; ?> value="mr">Marathi</option>
                                                            <option <?php echo ($map['google_lang'] == 'mn') ? 'selected' : ''; ?> value="mn">Mongolian</option>
                                                            <option <?php echo ($map['google_lang'] == 'ne') ? 'selected' : ''; ?> value="ne">Nepali</option>
                                                            <option <?php echo ($map['google_lang'] == 'no') ? 'selected' : ''; ?> value="no">Norwegian</option>
                                                            <option <?php echo ($map['google_lang'] == 'pl') ? 'selected' : ''; ?> value="pl">Polish</option>
                                                            <option <?php echo ($map['google_lang'] == 'pt') ? 'selected' : ''; ?> value="pt">Portuguese</option>
                                                            <option <?php echo ($map['google_lang'] == 'pt-BR') ? 'selected' : ''; ?> value="pt-BR">Portuguese (Brazil)</option>
                                                            <option <?php echo ($map['google_lang'] == 'pt-PT') ? 'selected' : ''; ?> value="pt-PT">Portuguese (Portugal)</option>
                                                            <option <?php echo ($map['google_lang'] == 'pa') ? 'selected' : ''; ?> value="pa">Punjabi</option>
                                                            <option <?php echo ($map['google_lang'] == 'ro') ? 'selected' : ''; ?> value="ro">Romanian</option>
                                                            <option <?php echo ($map['google_lang'] == 'ru') ? 'selected' : ''; ?> value="ru">Russian</option>
                                                            <option <?php echo ($map['google_lang'] == 'sr') ? 'selected' : ''; ?> value="sr">Serbian</option>
                                                            <option <?php echo ($map['google_lang'] == 'si') ? 'selected' : ''; ?> value="si">Sinhalese</option>
                                                            <option <?php echo ($map['google_lang'] == 'sk') ? 'selected' : ''; ?> value="sk">Slovak</option>
                                                            <option <?php echo ($map['google_lang'] == 'sl') ? 'selected' : ''; ?> value="sl">Slovenian</option>
                                                            <option <?php echo ($map['google_lang'] == 'es') ? 'selected' : ''; ?> value="es">Spanish</option>
                                                            <option <?php echo ($map['google_lang'] == 'es-419') ? 'selected' : ''; ?> value="es-419">Spanish (Latin America)</option>
                                                            <option <?php echo ($map['google_lang'] == 'sw') ? 'selected' : ''; ?> value="sw">Swahili</option>
                                                            <option <?php echo ($map['google_lang'] == 'sv') ? 'selected' : ''; ?> value="sv">Swedish</option>
                                                            <option <?php echo ($map['google_lang'] == 'ta') ? 'selected' : ''; ?> value="ta">Tamil</option>
                                                            <option <?php echo ($map['google_lang'] == 'te') ? 'selected' : ''; ?> value="te">Telugu</option>
                                                            <option <?php echo ($map['google_lang'] == 'th') ? 'selected' : ''; ?> value="th">Thai</option>
                                                            <option <?php echo ($map['google_lang'] == 'tr') ? 'selected' : ''; ?> value="tr">Turkish</option>
                                                            <option <?php echo ($map['google_lang'] == 'uk') ? 'selected' : ''; ?> value="uk">Ukrainian</option>
                                                            <option <?php echo ($map['google_lang'] == 'ur') ? 'selected' : ''; ?> value="ur">Urdu</option>
                                                            <option <?php echo ($map['google_lang'] == 'uz') ? 'selected' : ''; ?> value="uz">Uzbek</option>
                                                            <option <?php echo ($map['google_lang'] == 'vi') ? 'selected' : ''; ?> value="vi">Vietnamese</option>
                                                            <option <?php echo ($map['google_lang'] == 'zu') ? 'selected' : ''; ?> value="zu">Zulu</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style" title="ROAD" data-provider="google" id="google_roadmap">
                                                        <img src="img/google_roadmap.png">
                                                    </div>
                                                    <div class="map_style" title="TERRAIN" data-provider="google" id="google_terrain">
                                                        <img src="img/google_terrain.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_sel=='openfreemap') ? 'active' : ''; ?>" id="map_openfreemap_tab">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style" title="LIBERTY" data-provider="default" id="openfreemap_liberty">
                                                        <img src="img/openfreemap_liberty.png">
                                                    </div>
                                                    <div class="map_style" title="BRIGHT" data-provider="default" id="openfreemap_bright">
                                                        <img src="img/openfreemap_bright.png">
                                                    </div>
                                                    <div class="map_style" title="POSITRON" data-provider="default" id="openfreemap_positron">
                                                        <img src="img/openfreemap_positron.png">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="openfreemap_street_url"><?php echo _("Custom URL"); ?></label>
                                                        <input type="text" class="form-control" id="openfreemap_street_url" value="<?php echo $map['openfreemap_street_url']; ?>" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_sel=='carto') ? 'active' : ''; ?>" id="map_carto_tab">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style" title="VOYAGER" data-provider="carto" id="voyager">
                                                        <img src="img/voyager.png">
                                                    </div>
                                                    <div class="map_style" title="VOYAGER NO LABELS" data-provider="carto" id="voyager_nolabels">
                                                        <img src="img/voyager_nolabels.png">
                                                    </div>
                                                    <div class="map_style" title="LIGHT" data-provider="carto" id="light_all">
                                                        <img src="img/light_all.png">
                                                    </div>
                                                    <div class="map_style" title="LIGHT NO LABELS" data-provider="carto" id="light_nolabels">
                                                        <img src="img/light_nolabels.png">
                                                    </div>
                                                    <div class="map_style" title="DARK" data-provider="carto" id="dark_all">
                                                        <img src="img/dark_all.png">
                                                    </div>
                                                    <div class="map_style" title="DARK NO LABELS" data-provider="carto" id="dark_nolabels">
                                                        <img src="img/dark_nolabels.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_sel=='stadia') ? 'active' : ''; ?>" id="map_stadia_tab">
                                            <div class="row">
                                                <div class="col-md-12 mb-1">
                                                    <div class="map_style" title="ALIADE SMOOTH" data-provider="stadia" id="alidade_smooth">
                                                        <img src="img/alidade_smooth.png">
                                                    </div>
                                                    <div class="map_style" title="ALIADE SMOOTH DARK" data-provider="stadia" id="alidade_smooth_dark">
                                                        <img src="img/alidade_smooth_dark.png">
                                                    </div>
                                                    <div class="map_style" title="OUTDOORS" data-provider="stadia" id="outdoors">
                                                        <img src="img/outdoors.png">
                                                    </div>
                                                    <div class="map_style" title="STAMEN TONER" data-provider="stadia" id="stamen_toner">
                                                        <img src="img/stamen_toner.png">
                                                    </div>
                                                    <div class="map_style" title="STAMEN TONER LITE" data-provider="stadia" id="stamen_toner_lite">
                                                        <img src="img/stamen_toner_lite.png">
                                                    </div>
                                                    <div class="map_style" title="STAMEN TERRAIN" data-provider="stadia" id="stamen_terrain">
                                                        <img src="img/stamen_terrain.png">
                                                    </div>
                                                    <div class="map_style" title="STAMEN WATERCOLOR" data-provider="stadia" id="stamen_watercolor">
                                                        <img src="img/stamen_watercolor.png">
                                                    </div>
                                                    <div class="map_style" title="OSM BRIGHT" data-provider="stadia" id="osm_bright">
                                                        <img src="img/osm_bright.png">
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <i><?php echo _("In order to use Stadia maps, you must register <a target='_blank' href='https://client.stadiamaps.com/signup/'>here</a>. Once registered, you can whitelist your domain within your account settings."); ?></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_sel=='default') ? 'active' : ''; ?>" id="map_default_tab">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style" title="OPEN STREET MAP" data-provider="default" id="osm_free">
                                                        <img src="img/osm_free.png">
                                                    </div>
                                                    <div class="map_style" title="ARCGIS STREETS" data-provider="default" id="arcgis_street">
                                                        <img src="img/arcgis_street.png">
                                                    </div>
                                                    <div class="map_style" title="ARCGIS TOPOGRAPHIC" data-provider="default" id="arcgis_topo">
                                                        <img src="img/arcgis_topo.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_sel=='here') ? 'active' : ''; ?>" id="map_here_tab">
                                            <div class="row">
                                                <div class="col-md-8 mb-1">
                                                    <div class="form-group">
                                                        <label for="here_api">Here API KEY (<a target="_blank" href="https://developer.here.com/?create=Freemium-Basic"><?php echo _("link"); ?></a>)</label>
                                                        <input type="text" class="form-control" id="here_api" value="<?php echo $map['here_api']; ?>" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-1">
                                                    <div class="form-group">
                                                        <label for="here_lang"><?php echo _("Language"); ?></label>
                                                        <select id="here_lang" class="form-control">
                                                            <option <?php echo (empty($map['here_lang'])) ? 'selected' : ''; ?> value=""><?php echo _("Default"); ?></option>
                                                            <option <?php echo ($map['here_lang'] == 'ar') ? 'selected' : ''; ?> value="ar">Arabic</option>
                                                            <option <?php echo ($map['here_lang'] == 'as') ? 'selected' : ''; ?> value="as">Assamese</option>
                                                            <option <?php echo ($map['here_lang'] == 'az') ? 'selected' : ''; ?> value="az">Azerbaijani</option>
                                                            <option <?php echo ($map['here_lang'] == 'be') ? 'selected' : ''; ?> value="be">Belarusian</option>
                                                            <option <?php echo ($map['here_lang'] == 'bg') ? 'selected' : ''; ?> value="bg">Bulgarian</option>
                                                            <option <?php echo ($map['here_lang'] == 'bn') ? 'selected' : ''; ?> value="bn">Bengali</option>
                                                            <option <?php echo ($map['here_lang'] == 'bs') ? 'selected' : ''; ?> value="bs">Bosnian</option>
                                                            <option <?php echo ($map['here_lang'] == 'ca') ? 'selected' : ''; ?> value="ca">Catalan</option>
                                                            <option <?php echo ($map['here_lang'] == 'cs') ? 'selected' : ''; ?> value="cs">Czech</option>
                                                            <option <?php echo ($map['here_lang'] == 'cy') ? 'selected' : ''; ?> value="cy">Welsh</option>
                                                            <option <?php echo ($map['here_lang'] == 'da') ? 'selected' : ''; ?> value="da">Danish</option>
                                                            <option <?php echo ($map['here_lang'] == 'de') ? 'selected' : ''; ?> value="de">German</option>
                                                            <option <?php echo ($map['here_lang'] == 'el') ? 'selected' : ''; ?> value="el">Greek</option>
                                                            <option <?php echo ($map['here_lang'] == 'en') ? 'selected' : ''; ?> value="en">English</option>
                                                            <option <?php echo ($map['here_lang'] == 'es') ? 'selected' : ''; ?> value="es">Spanish</option>
                                                            <option <?php echo ($map['here_lang'] == 'et') ? 'selected' : ''; ?> value="et">Estonian</option>
                                                            <option <?php echo ($map['here_lang'] == 'eu') ? 'selected' : ''; ?> value="eu">Basque</option>
                                                            <option <?php echo ($map['here_lang'] == 'fi') ? 'selected' : ''; ?> value="fi">Finnish</option>
                                                            <option <?php echo ($map['here_lang'] == 'fo') ? 'selected' : ''; ?> value="fo">Faroese</option>
                                                            <option <?php echo ($map['here_lang'] == 'fr') ? 'selected' : ''; ?> value="fr">French</option>
                                                            <option <?php echo ($map['here_lang'] == 'ga') ? 'selected' : ''; ?> value="ga">Irish</option>
                                                            <option <?php echo ($map['here_lang'] == 'gl') ? 'selected' : ''; ?> value="gl">Galician</option>
                                                            <option <?php echo ($map['here_lang'] == 'gn') ? 'selected' : ''; ?> value="gn">Guarani</option>
                                                            <option <?php echo ($map['here_lang'] == 'gu') ? 'selected' : ''; ?> value="gu">Gujarati</option>
                                                            <option <?php echo ($map['here_lang'] == 'he') ? 'selected' : ''; ?> value="he">Hebrew</option>
                                                            <option <?php echo ($map['here_lang'] == 'hi') ? 'selected' : ''; ?> value="hi">Hindi</option>
                                                            <option <?php echo ($map['here_lang'] == 'hr') ? 'selected' : ''; ?> value="hr">Croatian</option>
                                                            <option <?php echo ($map['here_lang'] == 'hu') ? 'selected' : ''; ?> value="hu">Hungarian</option>
                                                            <option <?php echo ($map['here_lang'] == 'hy') ? 'selected' : ''; ?> value="hy">Armenian</option>
                                                            <option <?php echo ($map['here_lang'] == 'id') ? 'selected' : ''; ?> value="id">Indonesian</option>
                                                            <option <?php echo ($map['here_lang'] == 'is') ? 'selected' : ''; ?> value="is">Icelandic</option>
                                                            <option <?php echo ($map['here_lang'] == 'it') ? 'selected' : ''; ?> value="it">Italian</option>
                                                            <option <?php echo ($map['here_lang'] == 'ja') ? 'selected' : ''; ?> value="ja">Japanese</option>
                                                            <option <?php echo ($map['here_lang'] == 'ka') ? 'selected' : ''; ?> value="ka">Georgian</option>
                                                            <option <?php echo ($map['here_lang'] == 'kk') ? 'selected' : ''; ?> value="kk">Kazakh</option>
                                                            <option <?php echo ($map['here_lang'] == 'km') ? 'selected' : ''; ?> value="km">Khmer</option>
                                                            <option <?php echo ($map['here_lang'] == 'kn') ? 'selected' : ''; ?> value="kn">Kannada</option>
                                                            <option <?php echo ($map['here_lang'] == 'ko') ? 'selected' : ''; ?> value="ko">Korean</option>
                                                            <option <?php echo ($map['here_lang'] == 'ky') ? 'selected' : ''; ?> value="ky">Kyrgyz</option>
                                                            <option <?php echo ($map['here_lang'] == 'lt') ? 'selected' : ''; ?> value="lt">Lithuanian</option>
                                                            <option <?php echo ($map['here_lang'] == 'lv') ? 'selected' : ''; ?> value="lv">Latvian</option>
                                                            <option <?php echo ($map['here_lang'] == 'mk') ? 'selected' : ''; ?> value="mk">Macedonian</option>
                                                            <option <?php echo ($map['here_lang'] == 'ml') ? 'selected' : ''; ?> value="ml">Malayalam</option>
                                                            <option <?php echo ($map['here_lang'] == 'mr') ? 'selected' : ''; ?> value="mr">Marathi</option>
                                                            <option <?php echo ($map['here_lang'] == 'ms') ? 'selected' : ''; ?> value="ms">Malay</option>
                                                            <option <?php echo ($map['here_lang'] == 'mt') ? 'selected' : ''; ?> value="mt">Maltese</option>
                                                            <option <?php echo ($map['here_lang'] == 'my') ? 'selected' : ''; ?> value="my">Burmese</option>
                                                            <option <?php echo ($map['here_lang'] == 'nl') ? 'selected' : ''; ?> value="nl">Dutch</option>
                                                            <option <?php echo ($map['here_lang'] == 'no') ? 'selected' : ''; ?> value="no">Norwegian</option>
                                                            <option <?php echo ($map['here_lang'] == 'or') ? 'selected' : ''; ?> value="or">Oriya</option>
                                                            <option <?php echo ($map['here_lang'] == 'pa') ? 'selected' : ''; ?> value="pa">Punjabi</option>
                                                            <option <?php echo ($map['here_lang'] == 'pl') ? 'selected' : ''; ?> value="pl">Polish</option>
                                                            <option <?php echo ($map['here_lang'] == 'pt') ? 'selected' : ''; ?> value="pt">Portuguese</option>
                                                            <option <?php echo ($map['here_lang'] == 'ro') ? 'selected' : ''; ?> value="ro">Romanian</option>
                                                            <option <?php echo ($map['here_lang'] == 'ru') ? 'selected' : ''; ?> value="ru">Russian</option>
                                                            <option <?php echo ($map['here_lang'] == 'sk') ? 'selected' : ''; ?> value="sk">Slovak</option>
                                                            <option <?php echo ($map['here_lang'] == 'sl') ? 'selected' : ''; ?> value="sl">Slovenian</option>
                                                            <option <?php echo ($map['here_lang'] == 'sq') ? 'selected' : ''; ?> value="sq">Albanian</option>
                                                            <option <?php echo ($map['here_lang'] == 'sr') ? 'selected' : ''; ?> value="sr">Serbian</option>
                                                            <option <?php echo ($map['here_lang'] == 'sv') ? 'selected' : ''; ?> value="sv">Swedish</option>
                                                            <option <?php echo ($map['here_lang'] == 'ta') ? 'selected' : ''; ?> value="ta">Tamil</option>
                                                            <option <?php echo ($map['here_lang'] == 'te') ? 'selected' : ''; ?> value="te">Telugu</option>
                                                            <option <?php echo ($map['here_lang'] == 'th') ? 'selected' : ''; ?> value="th">Thai</option>
                                                            <option <?php echo ($map['here_lang'] == 'tr') ? 'selected' : ''; ?> value="tr">Turkish</option>
                                                            <option <?php echo ($map['here_lang'] == 'uk') ? 'selected' : ''; ?> value="uk">Ukrainian</option>
                                                            <option <?php echo ($map['here_lang'] == 'uz') ? 'selected' : ''; ?> value="uz">Uzbek</option>
                                                            <option <?php echo ($map['here_lang'] == 'vi') ? 'selected' : ''; ?> value="vi">Vietnamese</option>
                                                            <option <?php echo ($map['here_lang'] == 'zh') ? 'selected' : ''; ?> value="zh">Chinese (Simplified)</option>
                                                            <option <?php echo ($map['here_lang'] == 'zh-Hant') ? 'selected' : ''; ?> value="zh-Hant">Chinese (Traditional)</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style" title="BASIC" data-provider="here" id="explore_p_day">
                                                        <img src="img/explore.day.png">
                                                    </div>
                                                    <div class="map_style" title="DARK" data-provider="here" id="explore_p_night">
                                                        <img src="img/explore.night.png">
                                                    </div>
                                                    <div class="map_style" title="TOPOGRAPHIC" data-provider="here" id="topo_p_day">
                                                        <img src="img/topo.day.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_sel=='custom') ? 'active' : ''; ?>" id="map_custom_tab">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="street_basemap"><?php echo _("Tile Url"); ?></label>
                                                        <input type="text" class="form-control" id="street_basemap" value="<?php echo $map['street_basemap']; ?>" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_sel=='maptiler') ? 'active' : ''; ?>" id="map_maptiler_tab">
                                            <div class="row">
                                                <div class="col-md-12 mb-1">
                                                    <div class="form-group">
                                                        <label for="maptiler_api">Maptiler API KEY (<a target="_blank" href="https://www.maptiler.com/cloud/plans/"><?php echo _("link"); ?></a>)</label>
                                                        <input type="text" class="form-control" id="maptiler_api" value="<?php echo $map['maptiler_api']; ?>" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style" title="BASIC" data-provider="maptiler" id="basic-v2">
                                                        <img src="img/basic-v2.png">
                                                    </div>
                                                    <div class="map_style" title="BASIC DARK" data-provider="maptiler" id="basic-v2-dark">
                                                        <img src="img/basic-v2-dark.png">
                                                    </div>
                                                    <div class="map_style" title="BASIC LIGHT" data-provider="maptiler" id="basic-v2-light">
                                                        <img src="img/basic-v2-light.png">
                                                    </div>
                                                    <div class="map_style" title="BACKDROP" data-provider="maptiler" id="backdrop">
                                                        <img src="img/backdrop.png">
                                                    </div>
                                                    <div class="map_style" title="BACKDROP DARK" data-provider="maptiler" id="backdrop-dark">
                                                        <img src="img/backdrop-dark.png">
                                                    </div>
                                                    <div class="map_style" title="BACKDROP LIGHT" data-provider="maptiler" id="backdrop-light">
                                                        <img src="img/backdrop-light.png">
                                                    </div>
                                                    <div class="map_style" title="BRIGHT" data-provider="maptiler" id="bright-v2">
                                                        <img src="img/bright-v2.png">
                                                    </div>
                                                    <div class="map_style" title="BRIGHT DARK" data-provider="maptiler" id="bright-v2-dark">
                                                        <img src="img/bright-v2-dark.png">
                                                    </div>
                                                    <div class="map_style" title="BRIGHT LIGHT" data-provider="maptiler" id="bright-v2-light">
                                                        <img src="img/bright-v2-light.png">
                                                    </div>
                                                    <div class="map_style" title="BRIGHT PASTEL" data-provider="maptiler" id="bright-v2-pastel">
                                                        <img src="img/bright-v2-pastel.png">
                                                    </div>
                                                    <div class="map_style" title="DATAVIZ" data-provider="maptiler" id="dataviz">
                                                        <img src="img/dataviz.png">
                                                    </div>
                                                    <div class="map_style" title="DATAVIZ DARK" data-provider="maptiler" id="dataviz-dark">
                                                        <img src="img/dataviz-dark.png">
                                                    </div>
                                                    <div class="map_style" title="DATAVIZ LIGHT" data-provider="maptiler" id="dataviz-light">
                                                        <img src="img/dataviz-light.png">
                                                    </div>
                                                    <div class="map_style" title="OCEAN" data-provider="maptiler" id="ocean">
                                                        <img src="img/ocean.png">
                                                    </div>
                                                    <div class="map_style" title="OPEN STREET MAP" data-provider="maptiler" id="openstreetmap">
                                                        <img src="img/openstreetmap.png">
                                                    </div>
                                                    <div class="map_style" title="OUTDOOR" data-provider="maptiler" id="outdoor-v2">
                                                        <img src="img/outdoor-v2.png">
                                                    </div>
                                                    <div class="map_style" title="OUTDOOR DARK" data-provider="maptiler" id="outdoor-v2-dark">
                                                        <img src="img/outdoor-v2-dark.png">
                                                    </div>
                                                    <div class="map_style" title="STREETS" data-provider="maptiler" id="streets">
                                                        <img src="img/streets.png">
                                                    </div>
                                                    <div class="map_style" title="STREETS DARK" data-provider="maptiler" id="streets-v2-dark">
                                                        <img src="img/streets-v2-dark.png">
                                                    </div>
                                                    <div class="map_style" title="STREETS LIGHT" data-provider="maptiler" id="streets-v2-light">
                                                        <img src="img/streets-v2-light.png">
                                                    </div>
                                                    <div class="map_style" title="STREETS PASTEL" data-provider="maptiler" id="streets-v2-pastel">
                                                        <img src="img/streets-v2-pastel.png">
                                                    </div>
                                                    <div class="map_style" title="TONER" data-provider="maptiler" id="toner-v2">
                                                        <img src="img/toner-v2.png">
                                                    </div>
                                                    <div class="map_style" title="TONER LITE" data-provider="maptiler" id="toner-v2-lite">
                                                        <img src="img/toner-v2-lite.png">
                                                    </div>
                                                    <div class="map_style" title="TOPO" data-provider="maptiler" id="topo">
                                                        <img src="img/topo.png">
                                                    </div>
                                                    <div class="map_style" title="WINTER" data-provider="maptiler" id="winter-v2">
                                                        <img src="img/winter-v2.png">
                                                    </div>
                                                    <div class="map_style" title="WINTER DARK" data-provider="maptiler" id="winter-v2-dark">
                                                        <img src="img/winter-v2-dark.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="street_minzoom"><?php echo _("Min Zoom"); ?></label>
                                        <input type="number" min="1" max="20" class="form-control" id="street_minzoom" value="<?php echo $map['street_minzoom']; ?>" />
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="street_maxzoom"><?php echo _("Max Zoom"); ?></label>
                                        <input type="number" min="1" max="20" class="form-control" id="street_maxzoom" value="<?php echo $map['street_maxzoom']; ?>" />
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="street_attributions"><?php echo _("Attributions"); ?> <i title="<?php echo _("uncheck to hide the attributions, leave empty for default attributions"); ?>" class="help_t fas fa-question-circle"></i>&nbsp;&nbsp;<input onclick="change_use_street_attributions();" style="vertical-align:middle;" type="checkbox" id="use_street_attributions" <?php echo ($map['use_street_attributions']) ? 'checked' : ''; ?> /></label>
                                        <input <?php echo ($map['use_street_attributions']) ? '' : 'disabled'; ?> placeholder="<?php echo _("Default Attributions"); ?>" type="text" class="form-control" id="street_attributions" value='' />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="street_attributions_d"><?php echo _("Default Attributions"); ?></label>
                                        <input id="street_attributions_d" type="text" class="form-control" readonly value='' />
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="street_basemap_overlay"><?php echo _("Overlay - Tile Url"); ?></label>
                                        <input type="text" class="form-control" id="street_basemap_overlay" value="<?php echo $map['street_basemap_overlay']; ?>" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="street_overlay_opacity"><?php echo _("Overlay - Opacity"); ?></label>
                                        <input type="number" min="0" max="1" step="0.1" class="form-control" id="street_overlay_opacity" value="<?php echo $map['street_overlay_opacity']; ?>" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-map"></i> <?php echo _("Map - Satellite"); ?>&nbsp;&nbsp;&nbsp;<input onchange="change_enable_satellite();" style="vertical-align:middle;" type="checkbox" id="enable_map_satellite" <?php echo ($map['enable_map_satellite']) ? 'checked' : ''; ?> /></h6>
                        </div>
                        <div class="card-body satellite_body <?php echo ($map['enable_map_satellite']) ? '' : 'disabled'; ?>">
                            <div class="row">
                                <div class="col-md-12">
                                    <label><?php echo _("Style"); ?></label>
                                    <ul class="nav bg-gray-100 nav-pills nav-fill mb-3">
                                        <li class="nav-item">
                                            <a onclick="change_satellite_style('default')" class="nav-link <?php echo ($map_style_satellite_sel=='default') ? 'active' : ''; ?>" data-toggle="pill" href="#map_default_sat_tab"><?php echo strtoupper(_("DEFAULT")); ?></a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_satellite_style('maptiler')" class="nav-link <?php echo ($map_style_satellite_sel=='maptiler') ? 'active' : ''; ?>" data-toggle="pill" href="#map_maptiler_sat_tab">MAPTILER</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_satellite_style('here')" class="nav-link <?php echo ($map_style_satellite_sel=='here') ? 'active' : ''; ?>" data-toggle="pill" href="#map_here_sat_tab">HERE</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_satellite_style('google')" class="nav-link <?php echo ($map_style_satellite_sel=='google') ? 'active' : ''; ?>" data-toggle="pill" href="#map_google_sat_tab">GOOGLE</a>
                                        </li>
                                        <li class="nav-item">
                                            <a onclick="change_satellite_style('custom')" class="nav-link <?php echo ($map_style_satellite_sel=='custom') ? 'active' : ''; ?>" data-toggle="pill" href="#map_custom_sat_tab"><?php echo strtoupper(_("CUSTOM")); ?></a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane <?php echo ($map_style_satellite_sel=='google') ? 'active' : ''; ?>" id="map_google_sat_tab">
                                            <div class="row">
                                                <div class="col-md-8 mb-1">
                                                    <div class="form-group">
                                                        <label for="google_api_satellite">Google API KEY</label>
                                                        <input type="text" class="form-control" id="google_api_satellite" value="<?php echo $map['google_api_satellite']; ?>" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-1">
                                                    <div class="form-group">
                                                        <label for="google_lang_satellite"><?php echo _("Language"); ?></label>
                                                        <select id="google_lang_satellite" class="form-control">
                                                            <option <?php echo (empty($map['google_lang_satellite'])) ? 'selected' : ''; ?> value=""><?php echo _("Default"); ?></option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'af') ? 'selected' : ''; ?> value="af">Afrikaans</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'sq') ? 'selected' : ''; ?> value="sq">Albanian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'am') ? 'selected' : ''; ?> value="am">Amharic</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ar') ? 'selected' : ''; ?> value="ar">Arabic</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'hy') ? 'selected' : ''; ?> value="hy">Armenian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'az') ? 'selected' : ''; ?> value="az">Azerbaijani</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'eu') ? 'selected' : ''; ?> value="eu">Basque</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'be') ? 'selected' : ''; ?> value="be">Belarusian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'bn') ? 'selected' : ''; ?> value="bn">Bengali</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'bs') ? 'selected' : ''; ?> value="bs">Bosnian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'bg') ? 'selected' : ''; ?> value="bg">Bulgarian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'my') ? 'selected' : ''; ?> value="my">Burmese</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ca') ? 'selected' : ''; ?> value="ca">Catalan</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'zh') ? 'selected' : ''; ?> value="zh">Chinese</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'zh-CN') ? 'selected' : ''; ?> value="zh-CN">Chinese (Simplified)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'zh-HK') ? 'selected' : ''; ?> value="zh-HK">Chinese (Hong Kong)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'zh-TW') ? 'selected' : ''; ?> value="zh-TW">Chinese (Traditional)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'hr') ? 'selected' : ''; ?> value="hr">Croatian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'cs') ? 'selected' : ''; ?> value="cs">Czech</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'da') ? 'selected' : ''; ?> value="da">Danish</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'nl') ? 'selected' : ''; ?> value="nl">Dutch</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'en') ? 'selected' : ''; ?> value="en">English</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'en-AU') ? 'selected' : ''; ?> value="en-AU">English (Australian)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'en-GB') ? 'selected' : ''; ?> value="en-GB">English (Great Britain)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'et') ? 'selected' : ''; ?> value="et">Estonian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'fa') ? 'selected' : ''; ?> value="fa">Farsi</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'fi') ? 'selected' : ''; ?> value="fi">Finnish</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'fil') ? 'selected' : ''; ?> value="fil">Filipino</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'fr') ? 'selected' : ''; ?> value="fr">French</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'fr-CA') ? 'selected' : ''; ?> value="fr-CA">French (Canada)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'gl') ? 'selected' : ''; ?> value="gl">Galician</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ka') ? 'selected' : ''; ?> value="ka">Georgian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'de') ? 'selected' : ''; ?> value="de">German</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'el') ? 'selected' : ''; ?> value="el">Greek</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'gu') ? 'selected' : ''; ?> value="gu">Gujarati</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'iw') ? 'selected' : ''; ?> value="iw">Hebrew</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'hi') ? 'selected' : ''; ?> value="hi">Hindi</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'hu') ? 'selected' : ''; ?> value="hu">Hungarian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'is') ? 'selected' : ''; ?> value="is">Icelandic</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'id') ? 'selected' : ''; ?> value="id">Indonesian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'it') ? 'selected' : ''; ?> value="it">Italian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ja') ? 'selected' : ''; ?> value="ja">Japanese</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'kn') ? 'selected' : ''; ?> value="kn">Kannada</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'kk') ? 'selected' : ''; ?> value="kk">Kazakh</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'km') ? 'selected' : ''; ?> value="km">Khmer</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'kn') ? 'selected' : ''; ?> value="kn">Kannada</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ko') ? 'selected' : ''; ?> value="ko">Korean</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ky') ? 'selected' : ''; ?> value="ky">Kyrgyz</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'lo') ? 'selected' : ''; ?> value="lo">Lao</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'lv') ? 'selected' : ''; ?> value="lv">Latvian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'lt') ? 'selected' : ''; ?> value="lt">Lithuanian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'mk') ? 'selected' : ''; ?> value="mk">Macedonian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ms') ? 'selected' : ''; ?> value="ms">Malay</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ml') ? 'selected' : ''; ?> value="ml">Malayalam</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'mr') ? 'selected' : ''; ?> value="mr">Marathi</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'mn') ? 'selected' : ''; ?> value="mn">Mongolian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ne') ? 'selected' : ''; ?> value="ne">Nepali</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'no') ? 'selected' : ''; ?> value="no">Norwegian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'pl') ? 'selected' : ''; ?> value="pl">Polish</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'pt') ? 'selected' : ''; ?> value="pt">Portuguese</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'pt-BR') ? 'selected' : ''; ?> value="pt-BR">Portuguese (Brazil)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'pt-PT') ? 'selected' : ''; ?> value="pt-PT">Portuguese (Portugal)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'pa') ? 'selected' : ''; ?> value="pa">Punjabi</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ro') ? 'selected' : ''; ?> value="ro">Romanian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ru') ? 'selected' : ''; ?> value="ru">Russian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'sr') ? 'selected' : ''; ?> value="sr">Serbian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'si') ? 'selected' : ''; ?> value="si">Sinhalese</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'sk') ? 'selected' : ''; ?> value="sk">Slovak</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'sl') ? 'selected' : ''; ?> value="sl">Slovenian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'es') ? 'selected' : ''; ?> value="es">Spanish</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'es-419') ? 'selected' : ''; ?> value="es-419">Spanish (Latin America)</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'sw') ? 'selected' : ''; ?> value="sw">Swahili</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'sv') ? 'selected' : ''; ?> value="sv">Swedish</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ta') ? 'selected' : ''; ?> value="ta">Tamil</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'te') ? 'selected' : ''; ?> value="te">Telugu</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'th') ? 'selected' : ''; ?> value="th">Thai</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'tr') ? 'selected' : ''; ?> value="tr">Turkish</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'uk') ? 'selected' : ''; ?> value="uk">Ukrainian</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'ur') ? 'selected' : ''; ?> value="ur">Urdu</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'uz') ? 'selected' : ''; ?> value="uz">Uzbek</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'vi') ? 'selected' : ''; ?> value="vi">Vietnamese</option>
                                                            <option <?php echo ($map['google_lang_satellite'] == 'zu') ? 'selected' : ''; ?> value="zu">Zulu</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style_satellite" title="SATELLITE" data-provider="google" id="google_satellite">
                                                        <img src="img/google_satellite.png">
                                                    </div>
                                                    <div class="map_style_satellite" title="HYBRID" data-provider="google" id="google_hybrid">
                                                        <img src="img/google_hybrid.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_satellite_sel=='default') ? 'active' : ''; ?>" id="map_default_sat_tab">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style_satellite" title="ESRI SATELLITE" data-provider="default" id="arcgis">
                                                        <img src="img/arcgis.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_satellite_sel=='here') ? 'active' : ''; ?>" id="map_here_sat_tab">
                                            <div class="row">
                                                <div class="col-md-8 mb-1">
                                                    <div class="form-group">
                                                        <label for="here_api_satellite">Here API KEY (<a target="_blank" href="https://developer.here.com/?create=Freemium-Basic"><?php echo _("link"); ?></a>)</label>
                                                        <input type="text" class="form-control" id="here_api_satellite" value="<?php echo $map['here_api_satellite']; ?>" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-1">
                                                    <div class="form-group">
                                                        <label for="here_lang_satellite"><?php echo _("Language"); ?></label>
                                                        <select id="here_lang_satellite" class="form-control">
                                                            <option <?php echo (empty($map['here_lang_satellite'])) ? 'selected' : ''; ?> value=""><?php echo _("Default"); ?></option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ar') ? 'selected' : ''; ?> value="ar">Arabic</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'as') ? 'selected' : ''; ?> value="as">Assamese</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'az') ? 'selected' : ''; ?> value="az">Azerbaijani</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'be') ? 'selected' : ''; ?> value="be">Belarusian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'bg') ? 'selected' : ''; ?> value="bg">Bulgarian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'bn') ? 'selected' : ''; ?> value="bn">Bengali</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'bs') ? 'selected' : ''; ?> value="bs">Bosnian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ca') ? 'selected' : ''; ?> value="ca">Catalan</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'cs') ? 'selected' : ''; ?> value="cs">Czech</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'cy') ? 'selected' : ''; ?> value="cy">Welsh</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'da') ? 'selected' : ''; ?> value="da">Danish</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'de') ? 'selected' : ''; ?> value="de">German</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'el') ? 'selected' : ''; ?> value="el">Greek</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'en') ? 'selected' : ''; ?> value="en">English</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'es') ? 'selected' : ''; ?> value="es">Spanish</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'et') ? 'selected' : ''; ?> value="et">Estonian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'eu') ? 'selected' : ''; ?> value="eu">Basque</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'fi') ? 'selected' : ''; ?> value="fi">Finnish</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'fo') ? 'selected' : ''; ?> value="fo">Faroese</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'fr') ? 'selected' : ''; ?> value="fr">French</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ga') ? 'selected' : ''; ?> value="ga">Irish</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'gl') ? 'selected' : ''; ?> value="gl">Galician</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'gn') ? 'selected' : ''; ?> value="gn">Guarani</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'gu') ? 'selected' : ''; ?> value="gu">Gujarati</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'he') ? 'selected' : ''; ?> value="he">Hebrew</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'hi') ? 'selected' : ''; ?> value="hi">Hindi</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'hr') ? 'selected' : ''; ?> value="hr">Croatian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'hu') ? 'selected' : ''; ?> value="hu">Hungarian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'hy') ? 'selected' : ''; ?> value="hy">Armenian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'id') ? 'selected' : ''; ?> value="id">Indonesian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'is') ? 'selected' : ''; ?> value="is">Icelandic</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'it') ? 'selected' : ''; ?> value="it">Italian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ja') ? 'selected' : ''; ?> value="ja">Japanese</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ka') ? 'selected' : ''; ?> value="ka">Georgian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'kk') ? 'selected' : ''; ?> value="kk">Kazakh</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'km') ? 'selected' : ''; ?> value="km">Khmer</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'kn') ? 'selected' : ''; ?> value="kn">Kannada</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ko') ? 'selected' : ''; ?> value="ko">Korean</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ky') ? 'selected' : ''; ?> value="ky">Kyrgyz</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'lt') ? 'selected' : ''; ?> value="lt">Lithuanian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'lv') ? 'selected' : ''; ?> value="lv">Latvian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'mk') ? 'selected' : ''; ?> value="mk">Macedonian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ml') ? 'selected' : ''; ?> value="ml">Malayalam</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'mr') ? 'selected' : ''; ?> value="mr">Marathi</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ms') ? 'selected' : ''; ?> value="ms">Malay</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'mt') ? 'selected' : ''; ?> value="mt">Maltese</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'my') ? 'selected' : ''; ?> value="my">Burmese</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'nl') ? 'selected' : ''; ?> value="nl">Dutch</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'no') ? 'selected' : ''; ?> value="no">Norwegian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'or') ? 'selected' : ''; ?> value="or">Oriya</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'pa') ? 'selected' : ''; ?> value="pa">Punjabi</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'pl') ? 'selected' : ''; ?> value="pl">Polish</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'pt') ? 'selected' : ''; ?> value="pt">Portuguese</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ro') ? 'selected' : ''; ?> value="ro">Romanian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ru') ? 'selected' : ''; ?> value="ru">Russian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'sk') ? 'selected' : ''; ?> value="sk">Slovak</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'sl') ? 'selected' : ''; ?> value="sl">Slovenian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'sq') ? 'selected' : ''; ?> value="sq">Albanian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'sr') ? 'selected' : ''; ?> value="sr">Serbian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'sv') ? 'selected' : ''; ?> value="sv">Swedish</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'ta') ? 'selected' : ''; ?> value="ta">Tamil</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'te') ? 'selected' : ''; ?> value="te">Telugu</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'th') ? 'selected' : ''; ?> value="th">Thai</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'tr') ? 'selected' : ''; ?> value="tr">Turkish</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'uk') ? 'selected' : ''; ?> value="uk">Ukrainian</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'uz') ? 'selected' : ''; ?> value="uz">Uzbek</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'vi') ? 'selected' : ''; ?> value="vi">Vietnamese</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'zh') ? 'selected' : ''; ?> value="zh">Chinese (Simplified)</option>
                                                            <option <?php echo ($map['here_lang_satellite'] == 'zh-Hant') ? 'selected' : ''; ?> value="zh-Hant">Chinese (Traditional)</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style_satellite" title="SATELLITE" data-provider="here" id="satellite_p_day">
                                                        <img src="img/satellite.day.png">
                                                    </div>
                                                    <div class="map_style_satellite" title="HYBRID" data-provider="here" id="explore_p_satellite_p_day">
                                                        <img src="img/explore.satellite.day.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_satellite_sel=='custom') ? 'active' : ''; ?>" id="map_custom_sat_tab">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="satellite_basemap"><?php echo _("Tile Url"); ?></label>
                                                        <input type="text" class="form-control" id="satellite_basemap" value="<?php echo $map['satellite_basemap']; ?>" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane <?php echo ($map_style_satellite_sel=='maptiler') ? 'active' : ''; ?>" id="map_maptiler_sat_tab">
                                            <div class="row">
                                                <div class="col-md-12 mb-1">
                                                    <div class="form-group">
                                                        <label for="maptiler_api_satellite">Maptiler API KEY (<a target="_blank" href="https://www.maptiler.com/cloud/plans/"><?php echo _("link"); ?></a>)</label>
                                                        <input type="text" class="form-control" id="maptiler_api_satellite" value="<?php echo $map['maptiler_api_satellite']; ?>" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <div class="map_style_satellite" title="SATELLITE" data-provider="maptiler" id="satellite-v2">
                                                        <img src="img/satellite.png">
                                                    </div>
                                                    <div class="map_style_satellite" title="HYBRID" data-provider="maptiler" id="hybrid">
                                                        <img src="img/hybrid.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="satellite_minzoom"><?php echo _("Min Zoom"); ?></label>
                                        <input type="number" min="1" max="20" class="form-control" id="satellite_minzoom" value="<?php echo $map['satellite_minzoom']; ?>" />
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="satellite_maxzoom"><?php echo _("Max Zoom"); ?></label>
                                        <input type="number" min="1" max="20" class="form-control" id="satellite_maxzoom" value="<?php echo $map['satellite_maxzoom']; ?>" />
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="satellite_attributions"><?php echo _("Attributions"); ?> <i title="<?php echo _("uncheck to hide the attributions, leave empty for default attributions"); ?>" class="help_t fas fa-question-circle"></i>&nbsp;&nbsp;<input onclick="change_use_satellite_attributions();" style="vertical-align:middle;" type="checkbox" id="use_satellite_attributions" <?php echo ($map['use_satellite_attributions']) ? 'checked' : ''; ?> /></label>
                                        <input <?php echo ($map['use_satellite_attributions']) ? '' : 'disabled'; ?> placeholder="<?php echo _("Default Attributions"); ?>" type="text" class="form-control" id="satellite_attributions" value='' />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="satellite_attributions_d"><?php echo _("Default Attributions"); ?></label>
                                        <input id="satellite_attributions_d" type="text" class="form-control" readonly value='' />
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="satellite_basemap_overlay"><?php echo _("Overlay - Tile Url"); ?></label>
                                        <input type="text" class="form-control" id="satellite_basemap_overlay" value="<?php echo $map['satellite_basemap_overlay']; ?>" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="satellite_overlay_opacity"><?php echo _("Overlay - Opacity"); ?></label>
                                        <input type="number" min="0" max="1" step="0.1" class="form-control" id="satellite_overlay_opacity" value="<?php echo $map['satellite_overlay_opacity']; ?>" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-palette"></i> <?php echo _("General"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="main_color_hex"><?php echo _("Main color"); ?></label>
                                    <input type="text" class="form-control" id="main_color_hex" value="<?php echo $map['main_color_hex']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="font_viewer"><?php echo _("Font Viewer"); ?></label><br>
                                    <input type="text" class="form-control <?php echo ($settings['font_provider']=='systems') ? 'd-none' : ''; ?>" id="font_viewer" value="<?php echo $map['font_viewer']; ?>" />
                                    <select class="form-control <?php echo ($settings['font_provider']=='systems') ? '' : 'd-none'; ?>" id="font_viewer_system">
                                        <option id="Arial" <?php echo ($settings['font_backend'] === 'Arial') ? 'selected' : ''; ?>>Arial</option>
                                        <option id="Helvetica" <?php echo ($settings['font_backend'] === 'Helvetica') ? 'selected' : ''; ?>>Helvetica</option>
                                        <option id="Tahoma" <?php echo ($settings['font_backend'] === 'Tahoma') ? 'selected' : ''; ?>>Tahoma</option>
                                        <option id="Verdana" <?php echo ($settings['font_backend'] === 'Verdana') ? 'selected' : ''; ?>>Verdana</option>
                                        <option id="Geneva" <?php echo ($settings['font_backend'] === 'Geneva') ? 'selected' : ''; ?>>Geneva</option>
                                        <option id="Calibri" <?php echo ($settings['font_backend'] === 'Calibri') ? 'selected' : ''; ?>>Calibri</option>
                                        <option id="Trebuchet MS" <?php echo ($settings['font_backend'] === 'Trebuchet MS') ? 'selected' : ''; ?>>Trebuchet MS</option>
                                        <option id="Times New Roman" <?php echo ($settings['font_backend'] === 'Times New Roman') ? 'selected' : ''; ?>>Times New Roman</option>
                                        <option id="Georgia" <?php echo ($settings['font_backend'] === 'Georgia') ? 'selected' : ''; ?>>Georgia</option>
                                        <option id="Garamond" <?php echo ($settings['font_backend'] === 'Garamond') ? 'selected' : ''; ?>>Garamond</option>
                                        <option id="Book Antiqua" <?php echo ($settings['font_backend'] === 'Book Antiqua') ? 'selected' : ''; ?>>Book Antiqua</option>
                                        <option id="Palatino Linotype" <?php echo ($settings['font_backend'] === 'Palatino Linotype') ? 'selected' : ''; ?>>Palatino Linotype</option>
                                        <option id="Courier New" <?php echo ($settings['font_backend'] === 'Courier New') ? 'selected' : ''; ?>>Courier New</option>
                                        <option id="Lucida Console" <?php echo ($settings['font_backend'] === 'Lucida Console') ? 'selected' : ''; ?>>Lucida Console</option>
                                        <option id="Monaco" <?php echo ($settings['font_backend'] === 'Monaco') ? 'selected' : ''; ?>>Monaco</option>
                                        <option id="Comic Sans MS" <?php echo ($settings['font_backend'] === 'Comic Sans MS') ? 'selected' : ''; ?>>Comic Sans MS</option>
                                        <option id="Bradley Hand" <?php echo ($settings['font_backend'] === 'Bradley Hand') ? 'selected' : ''; ?>>Bradley Hand</option>
                                        <option id="Impact" <?php echo ($settings['font_backend'] === 'Impact') ? 'selected' : ''; ?>>Impact</option>
                                        <option id="Chalkduster" <?php echo ($settings['font_backend'] === 'Chalkduster') ? 'selected' : ''; ?>>Chalkduster</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-music"></i> <?php echo _("Song"); ?> <i title="<?php echo _("background song during viewing the map"); ?>" class="help_t fas fa-question-circle"></i></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div style="display:none;width:100%;" id="div_player_song" class="col-md-12 text-center">
                                <audio controls style="width:100%;">
                                    <source src="<?php echo $url_song; ?>" type="audio/mpeg">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                            <div style="display:none;width:100%;" id="div_delete_song" class="mt-2">
                                <div class="col-md-12">
                                    <button onclick="delete_song();return false;" id="btn_delete_song" class="btn btn-block btn-danger"><?php echo _("DELETE SONG"); ?></button>
                                </div>
                            </div>
                            <div style="display: none" id="div_upload_song" class="col-md-12">
                                <form id="frm_song" action="ajax/upload_song.php" method="POST" enctype="multipart/form-data">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <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-12">
                                            <div class="form-group">
                                                <input <?php echo ($demo) ? 'disabled':''; ?> type="submit" class="btn btn-block btn-success" id="btnUpload" value="<?php echo _("Upload Song (MP3)"); ?>" />
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="preview text-center">
                                                <div class="progress progress_song mb-3 mb-sm-3 mb-lg-0 mb-xl-0" style="height: 2.35rem;display: none">
                                                    <div class="progress-bar" id="progressBar_song" 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_song"></div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="song_link"><?php echo _("External link"); ?></label>
                                    <input id="song_link" type="text" class="form-control" value="<?php echo $map['song_link']; ?>">
                                </div>
                            </div>
                            <div id="div_song_bg_volume" class="col-md-8">
                                <div class="form-group">
                                    <label for="song_bg_volume"><?php echo _("Volume"); ?> (<span id="song_bg_volume_value"><?php echo $map['song_bg_volume']*100; ?>%</span>)</label>
                                    <input oninput="change_song_bg_volume();" min="0" max="1" step="0.1" id="song_bg_volume" type="range" class="form-control-range" value="<?php echo $map['song_bg_volume']; ?>">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="song_loop"><?php echo _("Loop"); ?></label><br>
                                    <input id="song_loop" type="checkbox" <?php echo ($map['song_loop']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="song_autoplay"><?php echo _("Autoplay"); ?></label>
                                    <select id="song_autoplay" class="form-control">
                                        <option <?php echo ($map['song_autoplay']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['song_autoplay']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled (without pop-up)"); ?></option>
                                        <option <?php echo ($map['song_autoplay']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (with pop-up)"); ?></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-eye"></i> <?php echo _("View"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="map_type"><?php echo _("Map type"); ?></label><br>
                                    <select id="map_type" class="form-control">
                                        <option <?php echo ($map['map_type']=='default') ? 'selected' : ''; ?> id="default"><?php echo _("Default"); ?></option>
                                        <option <?php echo ($map['map_type']=='large') ? 'selected' : ''; ?> id="large"><?php echo _("High number of markers"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="default_view"><?php echo _("Default view"); ?></label><br>
                                    <select id="default_view" class="form-control">
                                        <option <?php echo ($map['default_view']=='street') ? 'selected' : ''; ?> id="street"><?php echo _("Street"); ?></option>
                                        <option <?php echo ($map['default_view']=='satellite') ? 'selected' : ''; ?> id="satellite"><?php echo _("Satellite"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="enable_globe"><?php echo _("Globe view"); ?></label><br>
                                    <select id="enable_globe" class="form-control">
                                        <option <?php echo ($map['enable_globe']==0) ? 'selected' : ''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['enable_globe']==1) ? 'selected' : ''; ?> id="1"><?php echo _("Enabled"); ?></option>
                                        <option <?php echo ($map['enable_globe']==2) ? 'selected' : ''; ?> id="2"><?php echo _("Enabled (autostart)"); ?></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="loading_tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-spinner"></i> <?php echo _("Settings"); ?></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="auto_start"><?php echo _("Auto start"); ?> <i title="<?php echo _("start the map automatically on loading"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="auto_start" class="form-control">
                                        <option <?php echo ($map['auto_start']==0)?'selected':''; ?> id="0"><?php echo _("Disabled"); ?></option>
                                        <option <?php echo ($map['auto_start']==1)?'selected':''; ?> id="1"><?php echo _("Enabled"); ?></option>
                                        <option <?php echo ($map['auto_start']==2)?'selected':''; ?> id="2"><?php echo _("Enabled (Disabled when embedded)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="loading_visible"><?php echo _("Loading Visible"); ?></label><br>
                                    <input id="loading_visible" type="checkbox" <?php echo ($map['loading_visible']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="loading_background_color"><?php echo _("Loading Background Color"); ?></label><br>
                                    <input type="text" class="form-control" id="loading_background_color" value="<?php echo $map['loading_background_color']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="loading_text_color"><?php echo _("Loading Text Color"); ?></label><br>
                                    <input type="text" class="form-control" id="loading_text_color" value="<?php echo $map['loading_text_color']; ?>" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="lazy_loading"><?php echo _("Markers loading"); ?> <i title="<?php echo _("Choose how markers are loaded: before opening the map, asynchronously after the map is visible, or dynamically for the visible area while moving and zooming."); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <select id="lazy_loading" onchange="change_lazy_loading(true);" class="form-control">
                                        <option <?php echo ((int)($map['lazy_loading'] ?? 0)===0)?'selected':''; ?> id="0"><?php echo _("Default (before opening the map)"); ?></option>
                                        <option <?php echo ((int)($map['lazy_loading'] ?? 0)===1)?'selected':''; ?> id="1"><?php echo _("Deferred (after opening the map)"); ?></option>
                                        <option <?php echo ((int)($map['lazy_loading'] ?? 0)===2)?'selected':''; ?> id="2"><?php echo _("Dynamic (visible area)"); ?></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="lazy_loading_max_markers"><?php echo _("Maximum visible markers"); ?> <i title="<?php echo _("Maximum number of markers loaded for each visible area. Markers closest to the center are loaded first. Lower values improve performance; if the limit is reached, users can zoom in to load a smaller area."); ?>" class="help_t fas fa-question-circle"></i></label><br>
                                    <input type="number" min="1" max="50000" step="1" class="form-control" id="lazy_loading_max_markers" value="<?php echo (int)($map['lazy_loading_max_markers'] ?? 3000); ?>" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-window-maximize"></i> <?php echo _("Intro"); ?> <i title="<?php echo _("this section will be shown just after the map loads and before you can view it"); ?>" class="help_t fas fa-question-circle"></i>&nbsp;&nbsp;&nbsp;<input onchange="change_enable_intro();" style="vertical-align:middle" type="checkbox" id="enable_intro" <?php echo ($map['enable_intro']) ? 'checked' : ''; ?> /></h6>
                    </div>
                    <div class="card-body intro_body <?php echo ($map['enable_intro']) ? '' : 'disabled'; ?>">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_only_direct"><?php echo _("Only main link"); ?></label><br>
                                    <input id="intro_only_direct" type="checkbox" <?php echo ($map['intro_only_direct']) ? 'checked' : ''; ?> />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_background"><?php echo _("Background"); ?></label><br>
                                    <input type="text" class="form-control" id="intro_background" value="<?php echo $intro_params['background']; ?>" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="intro_title"><?php echo _("Title"); ?></label><?php echo print_language_input_selector($array_languages,$default_language,'intro_title'); ?><br>
                                    <input type="text" class="form-control" id="intro_title" value="<?php echo $intro_params['title']; ?>" />
                                    <?php foreach ($array_languages as $lang) {
                                        if($lang!=$default_language) : ?>
                                            <input style="display:none;" type="text" class="form-control input_lang" data-target-id="intro_title" data-lang="<?php echo $lang; ?>" value="<?php echo $array_input_lang[$lang]['intro_title']; ?>" />
                                        <?php endif;
                                    } ?>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_title_size"><?php echo _("Title - Size"); ?></label><br>
                                    <div class="input-group">
                                        <input type="number" min="0" class="form-control" id="intro_title_size" value="<?php echo $intro_params['title_size']; ?>" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">px</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_title_color"><?php echo _("Title - Color"); ?></label><br>
                                    <input type="text" class="form-control" id="intro_title_color" value="<?php echo $intro_params['title_color']; ?>" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="intro_description"><?php echo _("Description"); ?></label><?php echo print_language_input_selector($array_languages,$default_language,'intro_description'); ?><br>
                                    <textarea rows="2" class="form-control" id="intro_description"><?php echo $intro_params['description']; ?></textarea>
                                    <?php foreach ($array_languages as $lang) {
                                        if($lang!=$default_language) : ?>
                                            <textarea rows="2" style="display:none;" type="text" class="form-control input_lang" data-target-id="intro_description" data-lang="<?php echo $lang; ?>"><?php echo $array_input_lang[$lang]['intro_description']; ?></textarea>
                                        <?php endif;
                                    } ?>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_description_size"><?php echo _("Description - Size"); ?></label><br>
                                    <div class="input-group">
                                        <input type="number" min="0" class="form-control" id="intro_description_size" value="<?php echo $intro_params['description_size']; ?>" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">px</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_description_color"><?php echo _("Description - Color"); ?></label><br>
                                    <input type="text" class="form-control" id="intro_description_color" value="<?php echo $intro_params['description_color']; ?>" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <label for="intro_image"><?php echo _("Image"); ?></label><br>
                                <div style="display: none" id="div_image_im" class="col-md-12">
                                    <img src="<?php echo $url_intro_image; ?>" />
                                </div>
                                <div style="display: none" id="div_delete_im" class="col-md-12 mt-2 mb-2">
                                    <button <?php echo ($demo) ? 'disabled':''; ?> onclick="delete_im();" class="btn btn-block btn-danger"><?php echo _("REMOVE IMAGE"); ?></button>
                                </div>
                                <div id="div_upload_im" class="md-12">
                                    <form id="frm_im" action="ajax/upload_intro_image.php" method="POST" enctype="multipart/form-data">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="input-group">
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input" id="txtFile_im" name="txtFile_im" />
                                                        <label class="custom-file-label" for="txtFile_im"><?php echo _("Choose file"); ?></label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <input <?php echo ($demo) ? 'disabled':''; ?> type="submit" class="btn btn-block btn-success" id="btnUpload_im" value="<?php echo _("Upload Image"); ?>" />
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="preview text-center">
                                                    <div class="progress progress_im mb-3 mb-sm-3 mb-lg-0 mb-xl-0" style="height: 2.35rem;display: none">
                                                        <div class="progress-bar" id="progressBar_im" 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_im"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_image_height"><?php echo _("Image - Height"); ?></label><br>
                                    <div class="input-group">
                                        <input type="number" min="0" class="form-control" id="intro_image_height" value="<?php echo $intro_params['image_height']; ?>" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">px</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_button"><?php echo _("Button"); ?></label><?php echo print_language_input_selector($array_languages,$default_language,'intro_button'); ?><br>
                                    <input type="text" class="form-control" id="intro_button" value="<?php echo $intro_params['button']; ?>" />
                                    <?php foreach ($array_languages as $lang) {
                                        if($lang!=$default_language) : ?>
                                            <input style="display:none;" type="text" class="form-control input_lang" data-target-id="intro_button" data-lang="<?php echo $lang; ?>" value="<?php echo $array_input_lang[$lang]['intro_button']; ?>" />
                                        <?php endif;
                                    } ?>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_button_size"><?php echo _("Button - Size"); ?></label><br>
                                    <div class="input-group">
                                        <input type="number" min="0" class="form-control" id="intro_button_size" value="<?php echo $intro_params['button_size']; ?>" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">px</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_button_background"><?php echo _("Button - Background"); ?></label><br>
                                    <input type="text" class="form-control" id="intro_button_background" value="<?php echo $intro_params['button_background']; ?>" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="intro_button_color"><?php echo _("Button - Color"); ?></label><br>
                                    <input type="text" class="form-control" id="intro_button_color" value="<?php echo $intro_params['button_color']; ?>" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="far fa-image"></i> <?php echo _("Background Image (Desktop)"); ?> <i title="<?php echo _("image displayed as background during initial loading and used as preview image for share"); ?>" class="help_t fas fa-question-circle"></i></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div style="display: none" id="div_image_bg" class="col-md-12">
                                <img src="<?php echo $url_background_image; ?>" />
                            </div>
                            <div style="display: none" id="div_delete_bg" class="col-md-12 mt-2">
                                <button <?php echo ($demo) ? 'disabled':''; ?> onclick="delete_bg();" class="btn btn-block btn-danger"><?php echo _("REMOVE IMAGE"); ?></button>
                            </div>
                            <div style="display: none" class="col-md-12" id="div_upload_bg">
                                <form id="frm_b" action="ajax/upload_background_image.php" method="POST" enctype="multipart/form-data">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="txtFile_b" name="txtFile_b" />
                                                    <label class="custom-file-label" for="txtFile_b"><?php echo _("Choose file"); ?></label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <input <?php echo ($demo) ? 'disabled':''; ?> type="submit" class="btn btn-block btn-success" id="btnUpload_b" value="<?php echo _("Upload Background Image"); ?>" />
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="preview text-center">
                                                <div class="progress progress_b mb-3 mb-sm-3 mb-lg-0 mb-xl-0" style="height: 2.35rem;display: none">
                                                    <div class="progress-bar" id="progressBar_b" 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_b"></div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="far fa-image"></i> <?php echo _("Background Image (Mobile)"); ?> <i title="<?php echo _("image displayed as background during initial loading on a mobile"); ?>" class="help_t fas fa-question-circle"></i></h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div style="display: none;" id="div_image_bg_m" class="col-md-12">
                                <img src="<?php echo $url_background_image_mobile; ?>" />
                            </div>
                            <div style="display: none" id="div_delete_bg_m" class="col-md-12 mt-2">
                                <button <?php echo ($demo) ? 'disabled':''; ?> onclick="delete_bg_m();" class="btn btn-block btn-danger"><?php echo _("REMOVE IMAGE"); ?></button>
                            </div>
                            <div style="display: none" class="col-md-12" id="div_upload_bg_m">
                                <form id="frm_b_m" action="ajax/upload_background_image_m.php" method="POST" enctype="multipart/form-data">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="txtFile_b_m" name="txtFile_b_m" />
                                                    <label class="custom-file-label" for="txtFile_b_m"><?php echo _("Choose file"); ?></label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <input <?php echo ($demo) ? 'disabled':''; ?> type="submit" class="btn btn-block btn-success" id="btnUpload_b_m" value="<?php echo _("Upload Background Image"); ?>" />
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="preview text-center">
                                                <div class="progress progress_b_m mb-3 mb-sm-3 mb-lg-0 mb-xl-0" style="height: 2.35rem;display: none">
                                                    <div class="progress-bar" id="progressBar_b_m" 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_b_m"></div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modal_library_icons" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><?php echo _("Library Icons"); ?></h5>
            </div>
            <div class="modal-body">
                <?php echo get_library_icons($id_map); ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo _("Close"); ?></button>
            </div>
        </div>
    </div>
</div>

<div id="modal_library_icons_pin" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><?php echo _("Library Icons"); ?></h5>
            </div>
            <div class="modal-body">
                <?php echo get_library_icons_pin($id_map); ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo _("Close"); ?></button>
            </div>
        </div>
    </div>
</div>

<div id="modal_add_category" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><?php echo _("Add Category"); ?></h5>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" id="category_name" />
            </div>
            <div class="modal-footer">
                <button <?php echo ($demo) ? 'disabled':''; ?> onclick="add_category();" type="button" class="btn btn-success"><i class="fas fa-plus"></i> <?php echo _("Add"); ?></button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> <?php echo _("Close"); ?></button>
            </div>
        </div>
    </div>
</div>

<div id="modal_change_languages" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><?php echo _("Languages"); ?></h5>
            </div>
            <div class="modal-body">
                <p><?php echo _("Enabled languages have changed. To apply them, you need to reload the page."); ?>
                </p>
            </div>
            <div class="modal-footer">
                <button <?php echo ($demo) ? 'disabled':''; ?> onclick="save_map(true);" type="button" class="btn btn-success"><i class="fas fa-check"></i> <?php echo _("Yes, Reload"); ?></button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> <?php echo _("No, i will do later"); ?></button>
            </div>
        </div>
    </div>
</div>

<script>
    (function($) {
        "use strict";
        window.id_map = <?php echo $id_map; ?>;
        window.default_language = '<?php echo $default_language; ?>';
        window.map_style = '<?php echo $map['map_style']; ?>';
        window.map_style_satellite = '<?php echo $map['map_style_satellite']; ?>';
        window.map_style_sel = '<?php echo $map_style_sel; ?>';
        window.map_style_satellite_sel = '<?php echo $map_style_satellite_sel; ?>';
        if(window.map_style=='') {
            window.map_style = 'osm_free';
            window.map_style_sel = 'osm_free';
        }
        if(window.map_style_satellite=='') {
            window.map_style_satellite = 'arcgis';
            window.map_style_satellite_sel = 'arcgis';
        }
        window.logo = '<?php echo $map['logo']; ?>';
        window.logo_mobile = '<?php echo $map['logo_mobile']; ?>';
        window.song = '<?php echo $map['song']; ?>';
        window.main_color_hex_spectrum = null;
        window.color_hex_spectrum = null;
        window.icon_color_hex_spectrum = null;
        window.pin_color_hex_spectrum = null;
        window.pin_icon_color_hex_spectrum = null;
        window.color_hex_hover_spectrum = null;
        window.icon_color_hex_hover_spectrum = null;
        window.map_need_save = false;
        window.font_provider = '<?php echo $settings['font_provider']; ?>';
        window.background_image = '<?php echo $map['background_image']; ?>';
        window.background_image_mobile = '<?php echo $map['background_image_mobile']; ?>';
        window.intro_image = '<?php echo $map['intro_image']; ?>';
        window.loading_background_color_spectrum = null;
        window.loading_text_color_spectrum = null;
        window.osm_attributions = '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors';
        window.arcgis_attributions = '© <a href="https://www.esri.com/it-it/legal/copyright-trademarks" target="_blank">Esri</a> tiles - © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors';
        window.carto_attributions = '© <a href="https://carto.com/attributions" target="_blank">CARTO</a> tiles - © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors';
        window.maptiler_attributions = '© <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a> tiles - © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors';
        window.here_attributions = '© <a href="https://legal.here.com/en-gb/terms/here-end-user-terms" target="_blank">HERE</a> Technologies';
        window.stadia_attributions = '© <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> - © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> - © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors';
        window.google_attributions = 'Retrieved from Google API';
        window.openfreemap_attributions = 'Retrieved from Openfreemap';
        window.custom_html = null;
        var street_attributions = `<?php echo $map['street_attributions'] ?>`;
        var satellite_attributions = `<?php echo $map['satellite_attributions'] ?>`;
        var map_name = `<?php echo $map['name']; ?>`;
        $('#subtitle_header').html(map_name);
        $(document).ready(function () {
            bsCustomFileInput.init();
            $('.help_t').tooltip();
            change_lazy_loading();
            $('.map_style').tooltipster({delay:0});
            $('.map_style_satellite').tooltipster({delay:0});
            $('#street_attributions').val(street_attributions);
            $('#satellite_attributions').val(satellite_attributions);
            change_street_style(window.map_style_sel,false);
            change_satellite_style(map_style_satellite_sel,false);
            if(song=='') {
                $('#div_delete_song').hide();
                $('#div_player_song').hide();
                $('#div_upload_song').show();
            } else {
                $('#div_delete_song').show();
                $('#div_player_song').show();
                $('#div_upload_song').hide();
            }
            if(logo=='') {
                $('#div_delete_logo').hide();
                $('#div_image_logo').hide();
                $('#div_upload_logo').show();
            } else {
                $('#div_delete_logo').show();
                $('#div_image_logo').show();
                $('#div_upload_logo').hide();
            }
            if(logo_mobile=='') {
                $('#div_delete_logo_mobile').hide();
                $('#div_image_logo_mobile').hide();
                $('#div_upload_logo_mobile').show();
            } else {
                $('#div_delete_logo_mobile').show();
                $('#div_image_logo_mobile').show();
                $('#div_upload_logo_mobile').hide();
            }
            if(background_image=='') {
                $('#div_delete_bg').hide();
                $('#div_image_bg').hide();
                $('#div_upload_bg').show();
            } else {
                $('#div_delete_bg').show();
                $('#div_image_bg').show();
                $('#div_upload_bg').hide();
            }
            if(background_image_mobile=='') {
                $('#div_delete_bg_m').hide();
                $('#div_image_bg_m').hide();
                $('#div_upload_bg_m').show();
            } else {
                $('#div_delete_bg_m').show();
                $('#div_image_bg_m').show();
                $('#div_upload_bg_m').hide();
            }
            if(intro_image=='') {
                $('#div_delete_im').hide();
                $('#div_image_im').hide();
                $('#div_upload_im').show();
            } else {
                $('#div_delete_im').show();
                $('#div_image_im').show();
                $('#div_upload_im').hide();
            }
            $('#font_viewer').fontpicker({
                variants:false,
                localFonts: {},
                nrRecents: 0
            });
            if(window.font_provider=='systems') {
                $('.font-picker').addClass('d-none');
            }
            window.main_color_hex_spectrum = $('#main_color_hex').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: false
            });
            window.loading_background_color_spectrum = $('#loading_background_color').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: false
            });
            window.loading_text_color_spectrum = $('#loading_text_color').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: false
            });
            $('#'+map_style+' img').addClass("style-highlight");
            $('#'+map_style_satellite+' img').addClass("style-highlight");
            IconPicker.Init({
                jsonUrl: 'vendor/iconpicker/iconpicker-7.2.0.json',
                searchPlaceholder: '<?php echo _("Search Icon"); ?>',
                showAllButton: '<?php echo _("Show All"); ?>',
                cancelButton: '<?php echo _("Cancel"); ?>',
                noResultsFound: '<?php echo _("No results found."); ?>',
                borderRadius: '20px',
            });
            IconPicker.Run('#GetIconPicker', function(){
                $('#btn_delete_icon').prop('disabled',false);
                window.map_need_save = true;
            });
            IconPicker.Run('#GetIconPicker_info', function(){
                window.map_need_save = true;
            });
            IconPicker.Run('#GetIconPicker_pin', function(){
                window.map_need_save = true;
            });
            IconPicker.Run('.field_icon_picker', function(){
                window.marker_need_save = true;
            });
            window.color_hex_spectrum = $('#color_hex').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            window.icon_color_hex_spectrum = $('#icon_color_hex').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: false
            });
            window.pin_color_hex_spectrum = $('#pin_color_hex').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            window.pin_icon_color_hex_spectrum = $('#pin_icon_color_hex').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: false
            });
            window.color_hex_hover_spectrum = $('#color_hex_hover').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            window.icon_color_hex_hover_spectrum = $('#icon_color_hex_hover').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            $('#intro_background').spectrum({
                type: "text",
                preferredFormat: "rgb",
                showAlpha: true,
                showButtons: false,
                allowEmpty: true
            });
            $('#intro_title_color').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            $('#intro_description_color').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            $('#intro_button_background').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            $('#intro_button_color').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            $("#address-sorter").sortable({
                placeholder: "sortable-placeholder",
                handle: ".drag-handle",
                opacity: 0.8,
                tolerance: "pointer",
                cursor: "move",
                containment: "document"
            });
            $("#address-sorter").disableSelection();
            $(document).on('change', '.custom-control-input', function() {
                const $card = $(this).closest('.card');
                if(this.checked) {
                    $card.css('opacity', '1');
                } else {
                    $card.css('opacity', '0.6');
                }
            });
            const summernoteOptions = {
                minHeight: 400,
                toolbar: [
                    ['undo', ['undo', 'redo']],
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                    ['fontname', ['fontname', 'fontsize']],
                    ['color', ['forecolor', 'backcolor']],
                    ['para', ['ul', 'ol', 'paragraph', 'height']],
                    ['table', ['table', 'hr']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview']],
                ]
            };
            <?php if ($_SESSION['lang'] !== 'en_US' && $_SESSION['lang'] !== 'en_GB') : ?>
            summernoteOptions.lang = '<?php echo str_replace("_", "-", $_SESSION['lang']) ?>';
            <?php endif; ?>
            $('#info_content').summernote(summernoteOptions);
            $('.input_lang[data-target-id="info_content"]').each(function() {
                $('#' + this.id).summernote(summernoteOptions);
            });
            window.custom_html = ace.edit('custom_html');
            window.custom_html.session.setMode("ace/mode/html");
            window.custom_html.setOption('enableLiveAutocompletion',true);
            window.custom_html.setShowPrintMargin(false);
            if($('body').hasClass('dark_mode')) {
                window.custom_html.setTheme("ace/theme/one_dark");
            }
            if(window.rtl==1) {
                window.custom_html.setOption("rtl", true);
            }
            window.map_need_save = false;
        });
        $('.map_style').on('click',function () {
            $('.map_style img').removeClass("style-highlight");
            $(this).find('img').addClass("style-highlight");
            change_street_style(window.map_style_sel,true);
        });
        $('.map_style_satellite').on('click',function () {
            $('.map_style_satellite img').removeClass("style-highlight");
            $(this).find('img').addClass("style-highlight");
            change_satellite_style(map_style_satellite_sel,true);
        });

        $('body').on('submit','#frm_song',function(e){
            e.preventDefault();
            $('#error_song').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;
                update_progressbar_song(Math.round(percentage));
            },false);
            ajax.addEventListener('load',function(evt){
                if(evt.target.responseText.toLowerCase().indexOf('error')>=0){
                    show_error_song(evt.target.responseText);
                } else {
                    if(evt.target.responseText!='') {
                        window.map_need_save = true;
                        window.song = evt.target.responseText;
                        $('#div_player_song audio').attr('src','../viewer/content/'+window.song);
                        $('#div_delete_song').show();
                        $('#div_player_song').show();
                        $('#div_upload_song').hide();
                        $('#div_song_bg_volume').show();
                    }
                }
                update_progressbar_song(0);
                frm[0].reset();
            },false);
            ajax.addEventListener('error',function(evt){
                show_error_song('upload failed');
                update_progressbar_song(0);
            },false);
            ajax.addEventListener('abort',function(evt){
                show_error_song('upload aborted');
                update_progressbar_song(0);
            },false);
            ajax.open('POST',url);
            ajax.send(data);
            return false;
        });

        function update_progressbar_song(value){
            $('#progressBar_song').css('width',value+'%').html(value+'%');
            if(value==0){
                $('.progress_song').hide();
            }else{
                $('.progress_song').show();
            }
        }

        function show_error_song(error){
            $('.progress_song').hide();
            $('#error_song').show();
            $('#error_song').html(error);
        }

        $('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!='') {
                        window.map_need_save = true;
                        window.logo = evt.target.responseText;
                        $('#div_image_logo img').attr('src','../viewer/logos/'+window.logo);
                        $('#div_delete_logo').show();
                        $('#div_image_logo').show();
                        $('#div_upload_logo').hide();
                    }
                }
                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);
        }

        $('body').on('submit','#frm_mobile',function(e){
            e.preventDefault();
            $('#error_mobile').hide();
            var url = $(this).attr('action');
            var frm = $(this);
            var data = new FormData();
            if(frm.find('#txtFile_mobile[type="file"]').length === 1 ){
                data.append('file', frm.find( '#txtFile_mobile' )[0].files[0]);
            }
            var ajax  = new XMLHttpRequest();
            ajax.upload.addEventListener('progress',function(evt){
                var percentage = (evt.loaded/evt.total)*100;
                upadte_progressbar_mobile(Math.round(percentage));
            },false);
            ajax.addEventListener('load',function(evt){
                if(evt.target.responseText.toLowerCase().indexOf('error')>=0){
                    show_error_mobile(evt.target.responseText);
                } else {
                    if(evt.target.responseText!='') {
                        window.map_need_save = true;
                        window.logo_mobile = evt.target.responseText;
                        $('#div_image_logo_mobile img').attr('src','../viewer/logos/'+window.logo_mobile);
                        $('#div_delete_logo_mobile').show();
                        $('#div_image_logo_mobile').show();
                        $('#div_upload_logo_mobile').hide();
                    }
                }
                upadte_progressbar_mobile(0);
                frm[0].reset();
            },false);
            ajax.addEventListener('error',function(evt){
                show_error_mobile('upload failed');
                upadte_progressbar_mobile(0);
            },false);
            ajax.addEventListener('abort',function(evt){
                show_error_mobile('upload aborted');
                upadte_progressbar_mobile(0);
            },false);
            ajax.open('POST',url);
            ajax.send(data);
            return false;
        });

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

        function show_error_mobile(error){
            $('.progress').hide();
            $('#error_mobile').show();
            $('#error_mobile').html(error);
        }

        $('body').on('submit','#frm_b',function(e){
            e.preventDefault();
            $('#error_b').hide();
            var url = $(this).attr('action');
            var frm = $(this);
            var data = new FormData();
            if(frm.find('#txtFile_b[type="file"]').length === 1 ){
                data.append('file', frm.find( '#txtFile_b' )[0].files[0]);
            }
            var ajax  = new XMLHttpRequest();
            ajax.upload.addEventListener('progress',function(evt){
                var percentage = (evt.loaded/evt.total)*100;
                update_progressbar_b(Math.round(percentage));
            },false);
            ajax.addEventListener('load',function(evt){
                if(evt.target.responseText.toLowerCase().indexOf('error')>=0){
                    show_error_b(evt.target.responseText);
                } else {
                    if(evt.target.responseText!='') {
                        window.map_need_save = true;
                        window.background_image = evt.target.responseText;
                        $('#div_image_bg img').attr('src','../viewer/content/'+window.background_image);
                        $('#div_delete_bg').show();
                        $('#div_image_bg').show();
                        $('#div_upload_bg').hide();
                    }
                }
                update_progressbar_b(0);
                frm[0].reset();
            },false);
            ajax.addEventListener('error',function(evt){
                show_error_b('upload failed');
                update_progressbar_b(0);
            },false);
            ajax.addEventListener('abort',function(evt){
                show_error_b('upload aborted');
                update_progressbar_b(0);
            },false);
            ajax.open('POST',url);
            ajax.send(data);
            return false;
        });

        function update_progressbar_b(value){
            $('#progressBar_b').css('width',value+'%').html(value+'%');
            if(value==0){
                $('.progress_b').hide();
            }else{
                $('.progress_b').show();
            }
        }

        function show_error_b(error){
            $('.progress_b').hide();
            $('#error_b').show();
            $('#error_b').html(error);
        }

        $('body').on('submit','#frm_b_m',function(e){
            e.preventDefault();
            $('#error_b_m').hide();
            var url = $(this).attr('action');
            var frm = $(this);
            var data = new FormData();
            if(frm.find('#txtFile_b_m[type="file"]').length === 1 ){
                data.append('file', frm.find( '#txtFile_b_m' )[0].files[0]);
            }
            var ajax  = new XMLHttpRequest();
            ajax.upload.addEventListener('progress',function(evt){
                var percentage = (evt.loaded/evt.total)*100;
                update_progressbar_b_m(Math.round(percentage));
            },false);
            ajax.addEventListener('load',function(evt){
                if(evt.target.responseText.toLowerCase().indexOf('error')>=0){
                    show_error_b_m(evt.target.responseText);
                } else {
                    if(evt.target.responseText!='') {
                        window.map_need_save = true;
                        window.background_image_mobile = evt.target.responseText;
                        $('#div_image_bg_m img').attr('src','../viewer/content/'+window.background_image_mobile);
                        $('#div_delete_bg_m').show();
                        $('#div_image_bg_m').show();
                        $('#div_upload_bg_m').hide();
                    }
                }
                update_progressbar_b_m(0);
                frm[0].reset();
            },false);
            ajax.addEventListener('error',function(evt){
                show_error_b_m('upload failed');
                update_progressbar_b_m(0);
            },false);
            ajax.addEventListener('abort',function(evt){
                show_error_b_m('upload aborted');
                update_progressbar_b_m(0);
            },false);
            ajax.open('POST',url);
            ajax.send(data);
            return false;
        });

        function update_progressbar_b_m(value){
            $('#progressBar_b_m').css('width',value+'%').html(value+'%');
            if(value==0){
                $('.progress_b_m').hide();
            }else{
                $('.progress_b_m').show();
            }
        }

        function show_error_b_m(error){
            $('.progress_b_m').hide();
            $('#error_b_m').show();
            $('#error_b_m').html(error);
        }

        $('body').on('submit','#frm_im',function(e){
            e.preventDefault();
            $('#error_im').hide();
            var url = $(this).attr('action');
            var frm = $(this);
            var data = new FormData();
            if(frm.find('#txtFile_im[type="file"]').length === 1 ){
                data.append('file', frm.find( '#txtFile_im' )[0].files[0]);
            }
            var ajax  = new XMLHttpRequest();
            ajax.upload.addEventListener('progress',function(evt){
                var percentage = (evt.loaded/evt.total)*100;
                update_progressbar_im(Math.round(percentage));
            },false);
            ajax.addEventListener('load',function(evt){
                if(evt.target.responseText.toLowerCase().indexOf('error')>=0){
                    show_error_im(evt.target.responseText);
                } else {
                    if(evt.target.responseText!='') {
                        window.map_need_save = true;
                        window.intro_image = evt.target.responseText;
                        $('#div_image_im img').attr('src','../viewer/content/'+window.intro_image);
                        $('#div_delete_im').show();
                        $('#div_image_im').show();
                        $('#div_upload_im').hide();
                    }
                }
                update_progressbar_im(0);
                frm[0].reset();
            },false);
            ajax.addEventListener('error',function(evt){
                show_error_im('upload failed');
                update_progressbar_im(0);
            },false);
            ajax.addEventListener('abort',function(evt){
                show_error_im('upload aborted');
                update_progressbar_im(0);
            },false);
            ajax.open('POST',url);
            ajax.send(data);
            return false;
        });

        function update_progressbar_im(value){
            $('#progressBar_im').css('width',value+'%').html(value+'%');
            if(value==0){
                $('.progress_im').hide();
            }else{
                $('.progress_im').show();
            }
        }

        function show_error_im(error){
            $('.progress_im').hide();
            $('#error_im').show();
            $('#error_im').html(error);
        }

        $("input").change(function(){
            window.map_need_save = true;
        });

        $(window).on('beforeunload', function(){
            if(window.map_need_save) {
                var c=confirm();
                if(c) return true; else return false;
            }
        });
    })(jQuery);

    const checkbox1 = document.getElementById('enable_map_street');
    const checkbox2 = document.getElementById('enable_map_satellite');
    checkbox1.addEventListener('change', handleCheckboxChange);
    checkbox2.addEventListener('change', handleCheckboxChange);
    function handleCheckboxChange() {
        if (!checkbox1.checked && !checkbox2.checked) {
            this.checked = true;
        }
    }

    function apply_quality_preset() {
        var preset = $('#quality_preset').val();
        if (preset === 'custom') return;
        var quality_settings = {
            'low': {
                uwa: false, uwi: false, ltwa: false, ltwi: false, pt: 0, rb: 50, res: 'low'
            },
            'medium': {
                uwa: true, uwi: true, ltwa: false, ltwi: false, pt: 5, rb: 100, res: 'medium'
            },
            'high': {
                uwa: true, uwi: true, ltwa: true, ltwi: true, pt: 10, rb: 200, res: 'high'
            }
        };
        var s = quality_settings[preset];
        if (s) {
            $('#update_while_animating').prop('checked', s.uwa);
            $('#update_while_interacting').prop('checked', s.uwi);
            $('#load_tiles_while_animating').prop('checked', s.ltwa);
            $('#load_tiles_while_interacting').prop('checked', s.ltwi);
            $('#preload_tiles').val(s.pt);
            $('#preload_tiles_val').text(s.pt);
            $('#render_buffer').val(s.rb);
            $('#render_buffer_val').text(s.rb);
            $('#quality_resolution').val(s.res);
        }
        window.map_need_save = true;
    }

    function set_quality_custom() {
        const presets = {
            'low': { uwa: false, uwi: false, ltwa: false, ltwi: false, pt: 0, rb: 50, res: 'low' },
            'medium': { uwa: true, uwi: true, ltwa: false, ltwi: false, pt: 5, rb: 100, res: 'medium' },
            'high': { uwa: true, uwi: true, ltwa: true, ltwi: true, pt: 10, rb: 200, res: 'high' }
        };
        const current = {
            uwa: $('#update_while_animating').is(':checked'),
            uwi: $('#update_while_interacting').is(':checked'),
            ltwa: $('#load_tiles_while_animating').is(':checked'),
            ltwi: $('#load_tiles_while_interacting').is(':checked'),
            pt: parseInt($('#preload_tiles').val()),
            rb: parseInt($('#render_buffer').val()),
            res: $('#quality_resolution').val()
        };
        let matchedPreset = 'custom';
        for (const [name, values] of Object.entries(presets)) {
            if (
                current.uwa === values.uwa &&
                current.uwi === values.uwi &&
                current.ltwa === values.ltwa &&
                current.ltwi === values.ltwi &&
                current.pt === values.pt &&
                current.rb === values.rb &&
                current.res === values.res
            ) {
                matchedPreset = name;
                break;
            }
        }
        $('#quality_preset').val(matchedPreset);
        window.map_need_save = true;
    }
</script>
