@{
    ViewData["MainNum"] = "3";
    ViewData["SubNum"] = "1";
    ViewData["Title"] = "合併電站";
}
@using SolarPower.Models.Role
@model RoleLayerEnum



<div class="container-fluid">
    <div class="row flex-nowrap wrapper">
        <div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100  overflow-auto">

            <div class="list-group border-0 card text-center text-md-left" id="sidebar">

                <div class="border bg-light rounded-top">
                    <div class="form-group p-2 m-0 rounded-top">
                        <input type="text" class="form-control form-control-lg shadow-inset-2 m-0" id="js_list_accordion_filter" placeholder="">
                    </div>
                    <div id="js_list_accordion" class="accordion accordion-hover accordion-clean js-list-filter">
                    </div>
                    <span class="filter-message js-filter-message"></span>
                </div>
            </div>
        </div>
        <div class="col-auto px-0">
            <a href="javascript:;" id="collapse" data-target=".sidebar" data-toggle="collapse" class="btn btn-default btn-xs btn-icon waves-effect waves-themed" style="border-radius: 0;" aria-expanded="true">
                <span class="collapsed-reveal"><i class="fal fa-angle-left fa-lg py-3"></i></span>
                <span class="collapsed-hidden"><i class="fal fa-angle-right fa-lg py-3"></i></span>
            </a>
        </div>

        <main class="col px-5 pl-md-2 main">
            <ol class="breadcrumb page-breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">交叉分析</a></li>
                <li class="breadcrumb-item active">合併電站</li>
                <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
            </ol>
            <div class="subheader">
                <h1 class="subheader-title">
                    <i class='subheader-icon fal fa-globe'></i> 合併電站
                </h1>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div id="panel-5" class="panel">
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="row mb-5 d-flex align-items-top px-3">
                                    <div class="pr-3">
                                        <div class="btn-group btn-group-md">
                                            <button type="button" class="btn btn-success waves-effect waves-themed btn-change-searchType" id="Group0" onclick="changeType(0,this)">日</button>
                                            <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group2" onclick="changeType(2,this)">月</button>
                                            <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group3" onclick="changeType(3,this)">年</button>
                                            <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group1" onclick="changeType(1,this)">自訂區間</button>
                                        </div>
                                    </div>
                                    <div class="pr-3" id="quickSearchOption">
                                        <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-quickSearch1" onclick="quickSearch(0)">今天</button>
                                        <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-quickSearch2" onclick="quickSearch(1)">昨天</button>
                                    </div>

                                    <div class="pr-3">
                                        <div class="btn-group" id="js-demo-nesting" role="group" aria-label="Button group with nested dropdown">
                                            <input type="date" class="form-control" id="DateGet" />
                                        </div>
                                        <div class="btn-group" id="DateGettextdiv" role="group" aria-label="Button group with nested dropdown">
                                            <input type="text" class="form-control" id="DateGettext" />
                                        </div>
                                    </div>
                                </div>

                                <div class="frame-wrap">
                                    <div class="row mb-5">
                                        <div class="card-columns">

                                            <div class="card">
                                                <div class="card-header bg-fusion-25 pr-3 d-flex align-items-center flex-wrap">
                                                    <h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> 發電量</h4>
                                                    <div class="ml-auto">kW h</div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between">
                                                        <p id="today_kwh_label">當日發電量</p>
                                                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh">0.00</span></p>
                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        <p>總發電量</p>
                                                        <p><span class="color-info-700 fs-xl font-weight-bold" id="total_kwh">0.00</span></p>
                                                    </div>
                                                </div>
                                            </div>
                                            @if (ViewBag.myUser.Role.Auths.Contains("ShowMoney"))
                                            {
                                                <div class="card">
                                                    <div class="card-header bg-fusion-25 pr-3 d-flex align-items-center flex-wrap">
                                                        <h4 class="mb-0 font-weight-bold"><span class="fal fa-dollar-sign mr-1"></span> <span id="money-card-title">發電金額</span></h4>
                                                        <div class="ml-auto">NTD</div>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="d-flex justify-content-between">
                                                            <p id="today_money_label">當日發電金額</p>
                                                            <p><span class="color-info-700 fs-xl font-weight-bold" id="today_money">0</span></p>
                                                        </div>
                                                        <div class="d-flex justify-content-between">
                                                            <p id="money-card-subtitle-total">總發金額</p>
                                                            <p><span class="color-info-700 fs-xl font-weight-bold" id="total_money">0</span></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                            else
                                            {
                                                <div class="card">
                                                    <div class="card-header bg-fusion-25 pr-3 d-flex align-items-center flex-wrap">
                                                        <h4 class="mb-0 font-weight-bold"><span class="fal fa-sun mr-1"></span> 日照度</h4>
                                                        <div class="ml-auto">k W/m<sup>2</sup></div>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="d-flex justify-content-between">
                                                            <p id="today_irradiance_label">當日日照度</p>
                                                            <p><span class="color-info-700 fs-xl font-weight-bold" id="today_irradiance">0.00</span></p>
                                                        </div>
                                                        <div class="d-flex justify-content-between">
                                                            <p>平均日照度(30天)</p>
                                                            <p><span class="color-info-700 fs-xl font-weight-bold" id="total_irradiance">0.00</span></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                            <div class="card">
                                                <div class="card-header bg-fusion-25 pr-3 d-flex align-items-center flex-wrap">
                                                    <h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> PR值</h4>
                                                    <div class="ml-auto">%</div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between">
                                                        <p id="today_PR_label">當日PR值</p>
                                                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_PR">0.00</span></p>
                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        <p>平均 PR 值(30天)</p>
                                                        <p><span class="color-info-700 fs-xl font-weight-bold" id="total_PR">0.00</span></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header bg-fusion-25 pr-3 d-flex align-items-center flex-wrap">
                                                    <h4 class="mb-0 font-weight-bold"><span class="fal fa-sun mr-1"></span>有效日照時數</h4>
                                                    <div class="ml-auto">hr</div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between">
                                                        <p id="today_kwhkwp_label">當日有效日照時數 </p>
                                                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwhkwp">0.00</span></p>
                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        <p>平均有效日照時數(30天)</p>
                                                        <p><span class="color-info-700 fs-xl font-weight-bold" id="total_kwhkwp">0.00</span></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header bg-fusion-25 pr-3 d-flex align-items-center flex-wrap">
                                                    <h4 class="mb-0 font-weight-bold"><span class="fal fa-cow mr-1"></span> 減碳量</h4>
                                                    <div class="ml-auto">kG</div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between">
                                                        <p id="today_carbon_label">當日減碳量</p>
                                                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_carbon">0.00</span></p>
                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        <p>總減碳量</p>
                                                        <p><span class="color-info-700 fs-xl font-weight-bold" id="total_carbon">0.00</span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-5">
                                        <div class="col-xl-6">
                                            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                                <ol class="carousel-indicators">
                                                </ol>
                                                <div class="carousel-inner">
                                                </div>
                                                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                    <span class="sr-only">Previous</span>
                                                </a>
                                                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                    <span class="sr-only">Next</span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div id="station-convas-div">
                                                <canvas id="station-convas"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

@section Scripts{
    <script>
        var ids = new Array(0);//當前選擇縣市
        var powerids = new Array(0);//當前選擇電站
        var Allids = new Array(0);//全部縣市
        var Allpowerids = new Array(0);//全部電站
        var searchType = 0;//搜尋條件(日,日區間,月,年)
        var datepicker;
        var timerange;//選取時間
        $(function () {
            $('#collapse').trigger("click");

            //#region 預設初始值
            $('#DateGet').val(new Date().toISOString().substring(0, 10));
            document.getElementById("DateGettextdiv").style.display = "none";//隱藏
            $('#DateGet').attr('style', 'width:205px');
            $('#DateGettext').attr('style', 'width:205px');
            timerange = $('#DateGet').val();

            //#region Array.Remove
            Array.prototype.remove = function (val) {
                var index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                }
            };
            //#endregion

            //#endregion


            //#region 載入左邊選單列表
            GetPowerStationCollapse("");
            //#endregion

        })

        //#region 更換搜尋條件(日,日區間,月,年)
        function changeType(type, e) {
            searchType = type;
            if ($(".btn-change-searchType").hasClass("btn-success")) {
                $(".btn-change-searchType").removeClass("btn-success").addClass("btn-secondary");
            }
            document.getElementById("DateGettextdiv").style.display = "none";//隱藏
            document.getElementById("DateGet").style.display = "";//隱藏
            $(e).removeClass("btn-secondary").addClass("btn-success");
            var timename = "";


            switch (type) {
                case 0: $('#DateGet').prop({ 'type': 'date' });
                    $(".btn-change-quickSearch1").html("今天");
                    $(".btn-change-quickSearch2").html("昨天");
                    var today = new Date().toISOString().substring(0, 10);
                    $('#DateGet').val(today);
                    timename = "當日";
                    break;
                case 1:

                    //#region Date-Picker
                    datepicker = $('#DateGettext').daterangepicker({
                        autoUpdateInput: false,
                        locale: { format: 'YYYY/MM/DD' },
                        opens: 'left'
                    });

                    $('#DateGettext').on('apply.daterangepicker', function (ev, picker) {
                        $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
                        $(this).trigger('change');
                    });

                    $('#DateGettext').on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('');
                        $(this).trigger('change');
                    });
                    //#endregion

                    $(".btn-change-quickSearch1").html("近7天");
                    $(".btn-change-quickSearch2").html("近30天");
                    //#region 預設近7天
                    var today = new Date();
                    var dateLimit = new Date(new Date().setDate(today.getDate() - 7));
                    var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
                    var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
                    datepicker.data('daterangepicker').setStartDate(dateLimit_format);
                    datepicker.data('daterangepicker').setEndDate(today_format);
                    document.getElementById("DateGettextdiv").style.display = "";//隱藏
                    document.getElementById("DateGet").style.display = "none";//隱藏
                    //#endregion
                    $('#DateGettext').val(dateLimit_format + ' - ' + today_format);
                    timename = "期間";
                    break;
                case 2: $('#DateGet').prop({ 'type': 'month' });
                    $(".btn-change-quickSearch1").html("本月");
                    $(".btn-change-quickSearch2").html("上個月");
                    var now_month = new Date().toISOString().substring(0, 7);
                    $('#DateGet').val(now_month);
                    timename = "當月";
                    break;
                case 3:
                    $(".btn-change-quickSearch1").html("今年");
                    $(".btn-change-quickSearch2").html("去年");
                    var now_year = new Date().toISOString().substring(0, 4);
                    $('#DateGet').prop({ 'type': 'number', 'min': 1900, 'max': now_year, 'step': 1 });
                    $('#DateGet').val(now_year);
                    timename = "當年";
                    break;
            }

            $("#today_kwh_label").html(timename + "發電量");
            $("#today_money_label").html(timename + "發電金額");
            $("#today_kwhkwp_label").html(timename + "有效日照時數");
            $("#today_PR_label").html(timename + "PR值");
            $("#today_carbon_label").html(timename + "減碳量");
            $("#today_irradiance_label").html(timename + "日照度");

            if (type == 1) {
                timerange = $('#DateGettext').val();
            }
            else {
                timerange = $('#DateGet').val();
            }
            GetStationsCard();
        }
        //#endregion

        //#region 快速填入條件(EX.今昨天)
        function quickSearch(day) {
            switch (searchType) {
                case 0:
                    if (day == 0) {
                        var today = new Date().toISOString().substring(0, 10);
                        $('#DateGet').val(today).trigger('change');
                    } else {
                        var dateLimit = new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().substring(0, 10);
                        $('#DateGet').val(dateLimit).trigger('change');
                    }
                    break;
                case 1:
                    if (day == 0) {
                        //#region 預設近7天
                        var today = new Date();
                        var dateLimit = new Date(new Date().setDate(today.getDate() - 7));
                        var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
                        var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
                        datepicker.data('daterangepicker').setStartDate(dateLimit_format);
                        datepicker.data('daterangepicker').setEndDate(today_format);
                        //#endregion
                        $('#DateGettext').val(dateLimit_format + ' - ' + today_format).trigger('change');
                    } else {
                        //#region 預設近30天
                        var today = new Date();
                        var dateLimit = new Date(new Date().setDate(today.getDate() - 30));
                        var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
                        var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
                        datepicker.data('daterangepicker').setStartDate(dateLimit_format);
                        datepicker.data('daterangepicker').setEndDate(today_format);
                        //#endregion
                        $('#DateGettext').val(dateLimit_format + ' - ' + today_format).trigger('change');
                    }
                    break;
                case 2:
                    if (day == 0) {
                        var now_month = new Date().toISOString().substring(0, 7);
                        $('#DateGet').val(now_month).trigger('change');
                    } else {
                        var dateLimit = new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().substring(0, 7);
                        $('#DateGet').val(dateLimit).trigger('change');
                    }
                    break;
                case 3:
                    if (day == 0) {
                        var now_year = new Date().toISOString().substring(0, 4);
                        $('#DateGet').val(now_year).trigger('change');
                    } else {
                        var dateLimit = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().substring(0, 4);
                        $('#DateGet').val(dateLimit).trigger('change');
                    }
                    break;
            }
        }
        //#endregion

        //#region 更換input
        $('#DateGet').on('change', function () {
            timerange = $('#DateGet').val();
            GetStationsCard();
        });
        //#endregion

        //#region 更換inputtext
        $('#DateGettext').on('change', function () {
            timerange = $('#DateGettext').val();
            GetStationsCard();
        });
        //#endregion

        //#region 5張卡片值
        function GetStationsCard() {
            var send_data = {
                stationIds: powerids,
                timerange: timerange,
                seacrhType: searchType
            }

            var Nurl = "/AnalysisStationCombine/GetStationsCard";
            $.post(Nurl, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                $('#total_kwh').html(toThousands(rel.data.all_kwh.toFixed(2)));
                $('#total_money').html(toThousands(rel.data.all_money.toFixed()));
                $('#total_kwhkwp').html(toThousands(rel.data.all_KWH_KWP.toFixed(2)));
                $('#total_PR').html(toThousands(rel.data.all_PR.toFixed(2)));
                $('#total_carbon').html(toThousands(rel.data.all_Carbon.toFixed(2)));
                $('#total_irradiance').html(toThousands(rel.data.all_irradiance.toFixed(2)));


                $('#today_kwh').html(toThousands(rel.data.now_kwh.toFixed(2)));
                $('#today_money').html(toThousands(rel.data.now_money.toFixed()));
                $('#today_kwhkwp').html(toThousands(rel.data.now_KWH_KWP.toFixed(2)));
                $('#today_PR').html(toThousands(rel.data.now_PR.toFixed(2)));
                $('#today_carbon').html(toThousands(rel.data.now_Carbon.toFixed(2)));
                $('#today_irradiance').html(toThousands(rel.data.now_irradiance.toFixed(2)));
                chart();
            })

        }
        //#endregion

        //#region 圖片輪播
        function photoshow() {
            var url_image = "/PowerStation/GetAllPowerStationsALLImage";
            var send_data = {
                powerStationId: powerids
            };

            $.post(url_image, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                carouselExampleIndicators = $("#carouselExampleIndicators");
                carouselExampleIndicators.find(".carousel-indicators").empty();
                carouselExampleIndicators.find(".carousel-inner").empty();
                rel.data.forEach(function (value, index) {
                    CreatePowerStationImagecarousel(carouselExampleIndicators, value, index);
                });

                carouselExampleIndicators.find(".carousel-indicators > li").first().addClass("active");
                carouselExampleIndicators.find(".carousel-inner > .carousel-item").first().addClass("active");

            }, 'json');
        }
        function CreatePowerStationImagecarousel(dom, value, index) {
            var indicators = '<li data-target="#carouselExampleIndicators" data-slide-to="' + index + '"></li>'
            var carousel_item = '<div class="carousel-item">' +
                '<img class="d-block w-100" src="' + value.image + '">' +
                '</div>'

            dom.find(".carousel-indicators").append(indicators);
            dom.find(".carousel-inner").append(carousel_item);
        }
        //#endregion

        //#region 分析圖
        function chart() {
            var send_data = {
                stationIds: powerids,
                timerange: timerange,
                seacrhType: searchType
            }
            var listmonth = new Array(0);
            var listirradiance = new Array(0);
            var listtemperature = new Array(0);
            var listkwh = new Array(0);

            var Nurl = "/AnalysisStationCombine/GetChart";
            $.post(Nurl, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                $.each(rel.data, function (index, val) {
                    listmonth.push(val.time);
                    listirradiance.push(val.irradiance.toFixed(2));
                    listkwh.push(val.kwh.toFixed(2));
                    listtemperature.push(val.temperature.toFixed(2));
                })
                $('#station-convas-div').empty();
                $('#station-convas-div').append('<canvas id="station-convas"></canvas>');

                var ctx_history_kWh = document.getElementById('station-convas').getContext('2d');
                var myhistorykwh = new Chart(ctx_history_kWh, {
                    type: 'bar',
                    data: {
                        labels: listmonth,
                        datasets: [{
                            type: 'line',
                            label: '模組溫度(℃)',
                            borderColor: 'rgb(255, 192, 0)',
                            pointBackgroundColor: 'rgb(255, 192, 0)',
                            pointBorderColor: 'rgb(255, 192, 0)',
                            pointRadius: 4,
                            yAxisID: 'C',
                            fill: false,
                            data: listtemperature
                        },{
                            type: 'line',
                            label: '日照度(kWh/㎡)',
                            borderColor: 'rgb(190, 45, 45)',
                            pointBackgroundColor: 'rgb(190, 45, 45)',
                            pointBorderColor: 'rgb(190, 45, 45)',
                            pointRadius: 4,
                            yAxisID: 'B',
                            fill: false,
                            data: listirradiance
                        }, {
                            type: 'bar',
                            backgroundColor: 'rgb(103, 180, 172)',
                            borderWidth: 1,
                            label: '發電量(kWh)',
                            yAxisID: 'A',
                            data: listkwh
                        }]
                    },
                    options: {
                        title: {
                            display: true,
                            text: '發電量及日照度'
                        },
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        scales: {
                            yAxes: [{
                                id: 'A',
                                type: 'linear',
                                position: 'left',
                                ticks: {
                                    min: 0
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: 'kWh'
                                }
                            }, {
                                id: 'B',
                                type: 'linear',
                                position: 'right',
                                ticks: {
                                    min: 0
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: 'kWh/㎡'
                                }
                            }, {
                                id: 'C',
                                type: 'linear',
                                position: 'right',
                                ticks: {
                                    min: 0
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: '℃'
                                }
                            }]
                        }
                    }
                });
            });

        }
        //#endregion

        //#region 左邊的搜索欄位
        @*function myfunc(div) {
            var className = div.getAttribute("class");
            if (className == "fal fa-angle-left fa-lg py-3") {
                div.className = "fal fa-angle-right fa-lg py-3";
            }
            else {
                div.className = "fal fa-angle-left fa-lg py-3";
            }
        }*@

        $("#js_list_accordion_filter").change(function (e) {
            GetPowerStationCollapse($(this).val());
        });

        $('#js_list_accordion').on("change", 'input[name="selectedPowerStationLayer2[]"]', function (event) {

            if (this.checked) {
                powerids.push(this.value);
            } else {
                powerids.splice($.inArray(this.value, powerids), 1);
            }

            GetStationsCard();//5張卡片值
            photoshow();//輪播圖片

        });


        function GetPowerStationCollapse(filter) {
            @*var url = "/StationReport/GetPowerStationNameList"*@
            var url = "/AnalysisStationCombine/GetPowerStationCollapse"

            var send_data = {
                Filter: filter
            }

            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                var powerStationCollapse = rel.data;

                $('#js_list_accordion').empty();

                if (Object.keys(powerStationCollapse).length <= 0) {
                    $('#js_list_accordion').append("<div>查無結果</div>");
                }

                var str = "";

                Object.keys(powerStationCollapse).map(function (key, index) {
                    str += '<div class="card border-top-left-radius-0 border-top-right-radius-0" id="templateCard">' +
                        '<div class="card-header">' +
                        '<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-' + index + '" aria-expanded="false" data-filter-tags="settings">' +
                        '<i class="fal fa-globe width-2 fs-xl"></i>' +
                        '<span class="city-name">' + key + '</span>' +
                        '<span class="ml-auto">' +
                        '<span class="collapsed-reveal"><i class="fal fa-chevron-up fs-xl"></i></span>' +
                        '<span class="collapsed-hidden"><i class="fal fa-chevron-down fs-xl"></i></span>' +
                        '</span>' +
                        '</a>' +
                        '</div>' +
                        '<div id="js_list_accordion-' + index + '" class="collapse" data-parent="#js_list_accordion-' + index + '" style="">' +
                        '<div class="card-body">' +
                        '<ul class="list-group list-group-flush">';
                    $.each(powerStationCollapse[key], function (index, powerStation) {
                        str += '<li class="list-group-item">' +
                            '<div class="d-flex justify-content-start">' +
                            '<div class="">' +
                            '<input type="checkbox" class="mr-2" name="selectedPowerStationLayer2[]" value="' + powerStation.id + '" valueName ="' + powerStation.name + '">' +
                            '</div>' +
                            '<h5 class="font-weight-bold">' + powerStation.name + '</h5>' +
                            '</div>' +
                            '</li>';
                    });

                    str += '</ul>';
                    str += '</div>';
                    str += '</div>';

                });

                $('#js_list_accordion').append(str);
                $('#js_list_accordion').find('.card').first().addClass(" border-top-left-radius-0 border-top-right-radius-0");

                @*if (powerids.length <= 0) {
                    $('input[name="selectedPowerStationLayer2[]"]').trigger("click");
                }*@

                $('input[name="selectedPowerStationLayer2[]"]').each(function () {
                    if ($.inArray(this.value, powerids) > -1) {
                        $(this).prop('checked', true);
                    }
                });
                $("#js_list_accordion .collapse").collapse('show');

            }, 'json');
        }
                //#endregion

    </script>
}