@{
    ViewBag.Title = "Map";
}

<div class="wrapper">
    <!-- боковая левая панель -->
    <nav id="sidebar-left" class="active rounded-right">
        <div id="sidebar-left-header" class="sidebar-left-header display-3 rounded-right">
            <h2 id="settlement-title" class="text-center"></h2>
            <label id="settlement-url" hidden>111111</label>
            <div class="d-flex justify-content-center  btn-group w-100" role="group">
                <button id="sidebar-left-close" class="btn btn-secondary" type="button">Скрыть<br>панель</button>
                <button id="add-to-export-group" class="btn btn-secondary" type="button">Добавить<br>в экспорт</button>
            </div>
            <div class="d-flex justify-content-center  btn-group w-100" role="group">
                <button id="addEditInfo" class="mt-2 btn btn-secondary" type="button" hidden>Добавить новые данные</button>
            </div>
        </div>
        <div id="sidebar-left-text" class="sidebar-left-text">
        </div>
    </nav>
</div>

<div class="wrapper">
    <!-- боковая правая панель -->
    <nav id="sidebar-right" class="active rounded-left">
        <div id="sidebar-right-header" class="sidebar-right-header display-3 rounded-left">
            <h2 id="sidebar-right-header-title" class="text-center"></h2>
            <div class="d-flex justify-content-center  btn-group w-100" role="group">
                <button id="sidebar-right-close" class="btn btn-secondary" type="button">Скрыть<br>панель</button>
                <button hidden id="export-to-word" class="btn btn-secondary" type="button">Экспорт<br>в Word</button>
                <button hidden id="export-to-excel" class="btn btn-secondary" type="button">Экспорт<br>в Excel</button>
                <button hidden id="import-button" class="btn btn-secondary" type="submit" form="import-form">Отправить<br>данные</button>
            </div>
        </div>
        <div id="sidebar-right-text" class="sidebar-right-text">
            <div hidden id="sidebar-right-text-export"></div>
            <div hidden id="sidebar-right-text-import">
                <form id="import-form" class="sidebar-right-text-element">
                    <!--начало формы-->
                    <div class="form-group">
                        <label for="import-before-url">Основное поселение</label>
                        <input type="text" class="form-control" id="import-before-url" placeholder="Идентификатор поселения" required="" readonly="" value="">
                    </div>
                    <div class="form-group">
                        <label for="import-edited-hasBeginning">Дата сведений</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="import-edited-hasBeginning" placeholder="Год относящейся информации" required="">
                            <div class="input-group-append">
                                <span class="input-group-text">н. э.</span>
                            </div>
                            <div id="edited-hasBeginning-error" class="invalid-feedback">Не верный год.</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="import-edited-source">Источник сведений</label>
                        <input type="text" class="form-control" id="import-edited-source" placeholder="URL или другой идентификатор" value="" required="">
                        <div class="invalid-feedback">Ошибка в источнике сведений.</div>
                    </div>
                    <!--необязательные поля-->
                    <div class="form-group">
                        <label for="import-edited-title">Название поселения</label>
                        <input type="text" class="form-control" id="import-edited-title" placeholder="Дополнительное название" value="">
                        <div class="invalid-feedback">Ошибка в названии поселения.</div>
                    </div>
                    <div class="form-group">
                        <label for="import-edited-type">Тип поселения</label>                       
                        <select id="import-edited-type" class="form-control form-control-sm" size="3">
                            <option value="url_t_1">село</option>
                            <option value="url_t_2">город</option>
                            <option value="url_t_3">станция</option>
                            <option value="url_t_1">разъезд</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="import-edited-region">В составе административной единицы</label>
                        <select id="import-edited-region" class="form-control form-control-sm" size="3">
                            <option value="url_r_1">саратовский регион</option>
                            <option value="url_r_2">энгельсский регион</option>
                            <option value="url_r_3">ершовский регион</option>
                            <option value="url_r_1">аткарский регион</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="import-edited-populationAll">Общее количество населения</label>
                        <input type="text" class="form-control" id="import-edited-populationAll" placeholder="0" value="">
                        <div class="invalid-feedback">Неверное число.</div>
                    </div>
                    <div class="form-group">
                        <label for="import-edited-populationFemale">Количество женского населения</label>
                        <input type="text" class="form-control" id="import-edited-populationFemale" placeholder="0" value="">
                        <div class="invalid-feedback">Неверное число.</div>
                    </div>
                    <div class="form-group">
                        <label for="import-edited-populationMale">Количество мужского населения</label>
                        <input type="text" class="form-control" id="import-edited-populationMale" placeholder="0" value="">
                        <div class="invalid-feedback">Неверное число.</div>
                    </div>
                    <!--конец формы-->
                </form>
            </div>
        </div>
    </nav>
</div>

<div class="row">
    <div class="input-group mt-3 mb-2 col-md-6">
        <span class="input-group-btn">
            <button id="buttonSearch" class="btn btn-secondary" type="button">Найти</button>
        </span>
        <input id="inputName" type="text" class="form-control" placeholder="Введите название">
    </div>
    <div class="btn-group mt-3 mb-2 col-md-6" role="group">
        <button id="sidebar-right-export" type="button" class="btn btn-secondary">Экспорт</button>
        @if ((bool)ViewBag.isAuth)
        {
            <button id="sidebar-right-import" type="button" class="btn btn-secondary">Импорт</button>
        }
    </div>
</div>
<div id="slider"></div>

<div class="input-group w-100 mb-3 mt-1">
    <div class="input-group-prepend">
        <span id="slider-label-min" class="input-group-text tooltip-test" title="мин год">1590</span>
    </div>
    <input id="inputMinYear" type="text" class="form-control tooltip-test" placeholder="Нижняя граница поиска (год)" title="Выбор определенного года на временной линии">
    <input id="inputMaxYear" type="text" class="form-control tooltip-test" placeholder="Верхняя граница поиска (год)" title="Выбор определенного года на временной линии">
    <div class="input-group-append">
        <span id="slider-label-max" class="input-group-text tooltip-test" title="макс год">2019</span>
    </div>
</div>

<div id="map" style="width: 100%; height: 1000px; padding-left: 0px; "></div>

@*<p>
        <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</button>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
    </p>*@

<div class="container mt-4">
    <div class="row">
        <div class="d-flex justify-content-center  btn-group w-100" role="group">
            <button class="btn btn-dark" type="button" onclick="activeFilters()">Применить фильтры</button>
            <button class="btn btn-dark" type="button" onclick="defaultFilters()">Сбросить фильтры</button>
        </div>
    </div>
</div>

<div class="row mt-2">
    <div class="col">
        <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Типы поселений <span id="countTypes"></span></button>
    </div>
    <div class="col">
        <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Административные единицы <span id="countRegions"></span></button>
    </div>
</div>
<div class="row mt-1" id="filterGroups">
    <div class="col-3">
        <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card border-light" style="max-height: 300px; overflow-y: auto;">
                <ul class="list-group list-group-flush" id="filterGroupTypes"></ul>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card border-light" style="max-height: 300px; overflow-y: auto; overflow-x: auto">
                <ul class="list-group bg-transparent list-group-flush" id="filterGroupRegions"></ul>
            </div>
        </div>
    </div>
</div>

<script>
    var editButtonText = '';
</script>
@if ((bool)ViewBag.isAuth)
{
    <script>
        editButtonText = '<button type="button" id="_ID_" class="btn btn-outline-light btn-sm" onclick="printEditImportForm(\'_TYPE_\', \'_ID_\')"><img src="/Content/icon.png" width="20" height="20" /> редактировать</button>';
        document.getElementById('addEditInfo').hidden = false;
    </script>
}

<!--этот компонент позволяет скачивать файлы (функция экспорта в word, excel)-->
<iframe id="my_iframe" style="display:none;"></iframe>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=0ea4f7d6-01f0-471d-b717-ada9d94faa49&lang=ru_RU" type="text/javascript"></script>
@section Scripts {@Scripts.Render("~/Scripts/SiteScripts/AjaxQuery.js",
"~/Scripts/SiteScripts/Events.js",
"~/Scripts/SiteScripts/Output.js",
"~/Scripts/SiteScripts/Init.js")}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://bootstraptema.ru/plugins/2018/irs/ion.rangeSlider.css" />
<link rel="stylesheet" href="http://bootstraptema.ru/plugins/2018/irs/ion.rangeSlider.skin.css" />
