<?php
session_start();
$id_map = $_SESSION['id_map_sel'];
$map = get_map($id_map,$_SESSION['id_user']);
$settings = get_settings();
$tmp_languages = get_languages_map();
$array_languages = $tmp_languages[0];
$default_language = $tmp_languages[1];
?>

<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-cog"></i> <?php echo _("Details"); ?></h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <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 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 endif;
                            } ?>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="id_category_parent"><?php echo _("Parent Category"); ?></label>
                            <select class="form-control" id="id_category_parent">
                                <option id="0">--</option>
                                <?php echo get_parent_categories($id_map,0,0); ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="default_selected"><?php echo _("Default selected"); ?></label> <i title="<?php echo _("the category will be automatically selected when the map starts"); ?>" class="help_t fas fa-question-circle"></i><br>
                            <input type="checkbox" id="default_selected" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="featured"><?php echo _("Featured"); ?></label> <i title="<?php echo _("featured categories will be displayed at the top left under the search bar"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                            <input type="checkbox" id="featured" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="add_from_map"><?php echo _("Add markers from Map"); ?> <i title="<?php echo _("display this category or not when adding a marker from the map"); ?>" class="help_t fas fa-question-circle"></i></label><br>
                            <input checked type="checkbox" id="add_from_map" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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-map-marker"></i> <?php echo _("Icon Style"); ?></h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label><?php echo _("Type"); ?></label>
                            <select id="icon_type_c" onchange="change_icon_type_c();" class="form-control">
                                <option selected id="0"><?php echo _("Circle"); ?></option>
                                <option id="1"><?php echo _("Icon"); ?></option>
                                <option id="2"><?php echo _("Icon Library"); ?></option>
                            </select>
                        </div>
                    </div>
                    <div id="icon_type_c_1" class="col-md-3 d-none">
                        <div class="form-group">
                            <label><?php echo _("Icon"); ?></label><br>
                            <button class="btn btn-sm btn-primary" type="button" id="GetIconPicker_c" data-iconpicker-input="input#marker_icon_input_c" data-iconpicker-preview="i#marker_icon_c"><?php echo _("Select Icon"); ?></button>
                            <input readonly type="text" id="marker_icon_input_c" name="Icon_c" value="" required="" placeholder="" autocomplete="off" spellcheck="false">
                            <div class="icon-preview d-inline-block ml-1" data-toggle="tooltip" title="">
                                <i id="marker_icon_c" class=""></i>
                            </div>
                        </div>
                    </div>
                    <div id="icon_type_c_2" class="col-md-3 d-none">
                        <div class="form-group">
                            <label for="marker_library_icon_c"><?php echo _("Icon"); ?></label><br>
                            <button data-toggle="modal" data-target="#modal_library_icons_c" class="btn btn-sm btn-primary" type="button" id="btn_library_icon_c"><?php echo _("Select Library Icon"); ?></button>
                            <input type="hidden" id="marker_library_icon_c" value="">
                            <img id="marker_library_icon_preview_c" style="height: 30px;display: none" src="">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label><?php echo _("Background"); ?></label>
                            <input type="text" class="form-control" id="color_hex_c" value="#d3d3d3" />
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group disabled">
                            <label><?php echo _("Color"); ?></label>
                            <input type="text" class="form-control" id="icon_color_hex_c" value="#ffffff" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function($) {
        "use strict";
        window.id_category = 0;
        window.color_hex_c_spectrum = null;
        window.icon_color_hex_c_spectrum = null;
        window.category_need_save = false;

        $(document).ready(function () {
            $('.help_t').tooltip();
            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_c', function () {
                window.map_need_save = true;
            });
            window.color_hex_c_spectrum = $('#color_hex_c').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: true
            });
            window.icon_color_hex_c_spectrum = $('#icon_color_hex_c').spectrum({
                type: "text",
                preferredFormat: "hex",
                showAlpha: false,
                showButtons: false,
                allowEmpty: false
            });
        });

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

        $(window).on('beforeunload', function(){
            if(window.category_need_save) {
                var c=confirm();
                if(c) return true; else return false;
            }
        });
    })(jQuery);
</script>