@{
    ViewData["MainNum"] = "2";
    ViewData["Title"] = "電站管理";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">總覽</a></li>
    <li class="breadcrumb-item active">@ViewData["Title"]</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<!-- Your main content goes below here: -->
<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="subheader">
                        <h1 class="subheader-title"> 電站分佈區域 </h1>
                    </div>
                    <ul id="areaTab" class="nav nav-tabs mb-5" role="tablist">
                        @*<li class="nav-item">
                                <a class="nav-link fs-lg px-4 active" data-toggle="tab" href="#tab-newtaipei" role="tab">
                                    <span class="hidden-sm-down ml-1">新北市</span> <span class="badge bg-primary-500 ml-2">4</span>
                                </a>
                            </li>
                            <li class="nav-item" id="taipei">
                                <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taipei" role="tab">
                                    <span class="hidden-sm-down ml-1">台北市</span> <span class="badge bg-primary-500 ml-2">4</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-hsinchu" role="tab">
                                    <span class="hidden-sm-down ml-1">新竹市</span> <span class="badge bg-primary-500 ml-2">4</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-miaoli" role="tab">
                                    <span class="hidden-sm-down ml-1">苗栗縣</span> <span class="badge bg-primary-500 ml-2">1</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taichung" role="tab">
                                    <span class="hidden-sm-down ml-1">台中市</span> <span class="badge bg-primary-500 ml-2">3</span>
                                </a>
                            </li>*@
                    </ul>
                    <div id="area" class="tab-content p-3">
                        <!--<div class="tab-pane fade show active" id="tab-newtaipei" role="tabpanel" aria-labelledby="tab-newtaipei">
                        <div class="row mb-5 d-flex justify-content-between">
                            <div class="col-6">
                                <a asp-controller="PowerStation" asp-action="Edit" asp-route-stationId="new" class="btn btn-success waves-effect waves-themed mb-3">
                                    <span class="fal fa-plus mr-1"></span>
                                    新增電站
                                </a>
                            </div>
                            <div class="col-6 text-right">
                                <a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-list mr-1"></span></a>
                                <a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
                            </div>
                        </div>

                        <div class="row" id="solarCard">-->
                        @*<div class="col-xl-2">
                                <div class="card border m-auto m-lg-0">
                                    <a href="0station.html">
                                        <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                    </a>
                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
                                        <h4 class="font-weight-bold" style="line-height: 27px;">
                                            新竹巨城站
                                        </h4>

                                    </div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-2">
                                            <div class=" d-flex justify-content-between">
                                                <p>發電量</p>
                                                <p><span class="color-primary-400">185</span> kWh</p>

                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>發電金額</p>
                                                <p><span class="color-primary-400">2,5840</span> NT</p>

                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>Pr值</p>
                                                <p><span class="color-primary-400">90</span> %</p>

                                            </div>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                            <div class="col-xl-2">
                                <div class="card border m-auto m-lg-0">
                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
                                        <h4 class="font-weight-bold" style="line-height: 27px;">
                                            <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                <i class="fal fa-check"></i>
                                            </a> 新竹交大站
                                        </h4>
                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                    </div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-2">
                                            <div class=" d-flex justify-content-between">
                                                <p>發電量</p>
                                                <p><span class="color-primary-400">185</span> kWh</p>
                                                <p>27°C</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>發電金額</p>
                                                <p><span class="color-primary-400">2,5840</span> NT</p>
                                                <p class="small">2021-06-30</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>Pr值</p>
                                                <p><span class="color-primary-400">65</span> %</p>
                                                <p class="small">17:50:36</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2">
                                <div class="card border m-auto m-lg-0">
                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
                                        <h4 class="font-weight-bold" style="line-height: 27px;">
                                            <a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                <i class="fal fa-exclamation"></i>
                                            </a> 新竹動物園站
                                        </h4>
                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                    </div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-2">
                                            <div class=" d-flex justify-content-between">
                                                <p>發電量</p>
                                                <p><span class="color-primary-400">185</span> kWh</p>
                                                <p>27°C</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>發電金額</p>
                                                <p><span class="color-primary-400">2,5840</span> NT</p>
                                                <p class="small">2021-06-30</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>Pr值</p>
                                                <p><span class="color-primary-400">40</span> %</p>
                                                <p class="small">17:50:36</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2">
                                <div class="card border m-auto m-lg-0">
                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
                                        <h4 class="font-weight-bold" style="line-height: 27px;">
                                            <a href="javascript:void(0);" class="btn btn-danger btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                <i class="fal fa-horizontal-rule"></i>
                                            </a> 新竹動物園站
                                        </h4>
                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                    </div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-2">
                                            <div class=" d-flex justify-content-between">
                                                <p>發電量</p>
                                                <p><span class="color-primary-400">185</span> kWh</p>
                                                <p>27°C</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>發電金額</p>
                                                <p><span class="color-primary-400">2,5840</span> NT</p>
                                                <p class="small">2021-06-30</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>Pr值</p>
                                                <p><span class="color-primary-400">5</span> %</p>
                                                <p class="small">17:50:36</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 5%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2">
                                <div class="card border m-auto m-lg-0">
                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
                                        <h4 class="font-weight-bold" style="line-height: 27px;">
                                            <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                <i class="fal fa-check"></i>
                                            </a> 新竹巨城站
                                        </h4>
                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                    </div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-2">
                                            <div class=" d-flex justify-content-between">
                                                <p>發電量</p>
                                                <p><span class="color-primary-400">185</span> kWh</p>
                                                <p>27°C</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>發電金額</p>
                                                <p><span class="color-primary-400">2,5840</span> NT</p>
                                                <p class="small">2021-06-30</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>Pr值</p>
                                                <p><span class="color-primary-400">90</span> %</p>
                                                <p class="small">17:50:36</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-2">
                                <div class="card border m-auto m-lg-0">
                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
                                        <h4 class="font-weight-bold" style="line-height: 27px;">
                                            <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                <i class="fal fa-check"></i>
                                            </a> 新竹交大站
                                        </h4>
                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                    </div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-2">
                                            <div class=" d-flex justify-content-between">
                                                <p>發電量</p>
                                                <p><span class="color-primary-400">185</span> kWh</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>發電金額</p>
                                                <p><span class="color-primary-400">2,5840</span> NT</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>Pr值</p>
                                                <p><span class="color-primary-400">65</span> %</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-2"></div>
                            <div class="col-xl-2"></div>
                            <div class="col-xl-2"></div>
                            <div class="col-xl-2"></div>*@

                        <!--</div>

                        </div>

                        <div class="tab-pane fade" id="tab-taipei" role="tabpanel" aria-labelledby="tab-taipei">
                            <div class="row mb-5">
                                此處放台北市數據
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-hsinchu" role="tabpanel" aria-labelledby="tab-hsinchu">
                            <div class="row mb-5">
                                此處放新竹市數據
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-miaoli" role="tabpanel" aria-labelledby="tab-miaoli">
                            <div class="row mb-5">
                                此處放苗栗縣數據
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-taichung" role="tabpanel" aria-labelledby="tab-taichung">
                            <div class="row mb-5">
                                此處放台中市數據
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="templateAreaTab" hidden="hidden">
    <ul>
        <li class="nav-item">
            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-newtaipei" role="tab">
                <span id="areaName" class="hidden-sm-down ml-1">新北市</span> <span id="solarCount" class="badge bg-primary-500 ml-2">4</span>
            </a>
        </li>
    </ul>
</div>
<div id="templateArea" hidden="hidden">
    <div class="tab-pane" id="tab-name" role="tabpanel" aria-labelledby="tab-name">
        <div class="row mb-5 d-flex justify-content-between">
            <div class="col-6">
                <a asp-controller="PowerStation" asp-action="Edit" asp-route-stationId="new" class="btn btn-success waves-effect waves-themed mb-3">
                    <span class="fal fa-plus mr-1"></span>
                    新增電站
                </a>
            </div>
            <div class="col-6 text-right">
                <a href="javascript:TableDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-list mr-1"></span></a>
                <a href="javascript:CardDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
            </div>
        </div>

        <div class="row solarCard" id="solarCard">
        </div>
        <div class="TableArea">
            <table id="solarTable" class="table table-bordered table-hover m-0 text-center">
                <thead class="thead-themed">
                    <tr>
                        <th>編號</th>
                        <th>電站名稱</th>
                        <th>裝置容量(kWp)</th>
                        <th>逆變器數量</th>
                        <th>台電掛表日</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @*<tr>
                            <th scope="row">PEP-NTP001-PYR-01</th>
                            <td>日照計01</td>
                            <td>日照計</td>
                            <td>ADTEK</td>
                            <td>CS1</td>
                            <td></td>
                            <td>CS1</td>
                            <td></td>
                            <td></td>
                            <td>
                                <button type="button" class="btn btn-primary btn-pills waves-effect waves-themed">修改</button>
                            </td>
                        </tr>*@
                </tbody>
            </table>
        </div>

    </div>
</div>

<div id="templateCard" hidden="hidden">
    <div class="col-xl-2">
        <div class="card border m-auto m-lg-0">
            <a id="editSolarUrl" href="0station.html">
                <img id="Solarimg" src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
            </a>
            <div class="card-body d-flex justify-content-between pb-0 px-2">
                <h4 id="solarName" class="font-weight-bold" style="line-height: 27px;">
                    新竹巨城站
                </h4>

            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item px-2">
                    <div class=" d-flex justify-content-between">
                        <p>裝置容量</p>
                        <p><span id="today_kwh" class="color-primary-400">185</span> kWh</p>

                    </div>
                    <div class=" d-flex justify-content-between">
                        <p>逆變器數量</p>
                        <p><span id="kwhkwp" class="color-primary-400">2,5840</span></p>

                    </div>
                    <div class=" d-flex justify-content-between">
                        <p>台電掛表日</p>
                        <p><span id="PR" class="color-primary-400">90</span></p>

                    </div>
                </li>
            </ul>

        </div>
    </div>
</div>

@section Scripts{
    <script>
        var tablocation = "";
        $(function () {

            var localurl = this.location.href;
            var url = "/PowerStation/GetSolarCitySummary";
            var ids = new Array(0)
            $.post(url, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                else {
                    $.each(rel.data, function (index, val) {
                        //電站區域
                        if (index == 0) {
                            tablocation = val.cityId;
                        }
                        ids.push(val.cityId);
                        $('#templateAreaTab').find('li').attr('id', 'AreaTab' + val.cityId).clone().appendTo($('#areaTab'));
                        $('#AreaTab' + val.cityId).find('a').attr('href', '#tab-' + val.cityId);
                        $('#AreaTab' + val.cityId).find('a').attr('class', 'nav-link fs-lg px-4');
                        $('#AreaTab' + val.cityId).find('#areaName').html(val.city)
                        $('#AreaTab' + val.cityId).find('#solarCount').html(val.amount)
                        //alert(val.cityId+val.city + val.amount);
                        //電站區域內容
                        $('#templateArea').find('.tab-pane').attr('id', 'tab-' + val.cityId).clone().appendTo($('#area'));
                        $('#tab-' + val.cityId).attr('aria-labelledby', val.cityId)
                        $('#tab-' + val.cityId).find('#solarCard').attr('id', 'solarCard' + val.cityId);
                        $('#tab-' + val.cityId).find('#solarTable').attr('id', 'solarTable' + val.cityId);
                    });
                    addPowerStationCard(ids);

                    $("#areaTab").find(".nav-item > a").first().click();
                    return;
                }


            }, 'json');

            function addPowerStationCard(ids) {

                //alert(ids);
                var url = "/PowerStation/GetSolarByCity";
                var send_data = {
                    cityid: ids
                }
                $.post(url, send_data, function (rel) {
                    if (rel.code != "0000") {
                        toast_error(rel.msg);
                        return;
                    }
                    else {
                        $.each(rel.data, function (index, val) {
                            //電站卡片
                            $('#templateCard').find('.col-xl-2').attr('id', 'card' + val.id).clone().appendTo($('#solarCard' + val.cityId));
                            $('#card' + val.id).find('#editSolarUrl').attr('href', localurl + '/edit?stationId=' + val.id);
                            $('#card' + val.id).find('#editSolarUrl').find('#Solarimg').attr('src', val.mainDisplay);
                            $('#card' + val.id).find('#solarName').text(val.name);
                            $('#card' + val.id).find('#today_kwh').text(val.kwh);
                            $('#card' + val.id).find('#kwhkwp').text(val.inverterAmount);
                            $('#card' + val.id).find('#PR').text(val.electricityMeterAt);

                            $('#solarTable' + val.cityId).find('tbody').append('<tr>' +
                                '<td>' + val.id + '</td>' +
                                '<td>' + val.name + '</td>' +
                                '<td>' + val.kwh + '</td>' +
                                '<td>' + val.inverterAmount + '</td>' +
                                '<td>' + val.electricityMeterAt + '</td>' +
                                '<td><button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=' + val.id + '\'">選擇</button></td>' +

                                '</tr>');
                        });
                        $('.nav-tabs a[href="#' + tablocation + '"]').tab('show');

                        return;
                    }

                }, 'json');
            }
            //電站區域
            //$('#templateAreaTab').find('li').attr('id', 'AreaTabnewtaipei').clone().appendTo($('#areaTab'));
            //$('#AreaTabnewtaipei').find('a').attr('href', '#tab-newtaipei');
            //$('#AreaTabnewtaipei').find('a').attr('class', 'nav-link fs-lg px-4');
            //$('#AreaTabnewtaipei').find('#areaName').html('新北市')
            //$('#AreaTabnewtaipei').find('#solarCount').html('2')

            //$('#templateAreaTab').find('li').attr('id', 'AreaTabHsinchu').clone().appendTo($('#areaTab'));
            //$('#AreaTabHsinchu').find('a').attr('href', '#tab-Hsinchu');
            //$('#AreaTabHsinchu').find('a').attr('class', 'nav-link fs-lg px-4');
            //$('#AreaTabHsinchu').find('#areaName').html('新竹市')
            //$('#AreaTabHsinchu').find('#solarCount').html('3')

            //$('#templateAreaTab').find('li').attr('id', 'AreaTabPingtung').clone().appendTo($('#areaTab'));
            //$('#AreaTabPingtung').find('a').attr('href', '#tab-Pingtung');
            //$('#AreaTabPingtung').find('a').attr('class', 'nav-link fs-lg px-4');
            //$('#AreaTabPingtung').find('#areaName').html('屏東縣')
            //$('#AreaTabPingtung').find('#solarCount').html('1')

            //電站區域內容
            //$('#templateArea').find('.tab-pane').attr('id', 'tab-newtaipei').clone().appendTo($('#area'));
            //$('#tab-newtaipei').attr('aria-labelledby', 'tab-newtaipei')
            //$('#tab-newtaipei').find('#solarCard').attr('id', 'solarCardnewtaipei');
            //$('#tab-newtaipei').find('#solarTable').attr('id', 'solarTablenewtaipei');

            //$('#templateArea').find('.tab-pane').attr('id', 'tab-Hsinchu').clone().appendTo($('#area'));
            //$('#tab-Hsinchu').attr('aria-labelledby', 'tab-Hsinchu')
            //$('#tab-Hsinchu').find('#solarCard').attr('id', 'solarCardHsinchu');
            //$('#tab-Hsinchu').find('#solarTable').attr('id', 'solarTableHsinchu');

            //$('#templateArea').find('.tab-pane').attr('id', 'tab-Pingtung').clone().appendTo($('#area'));
            //$('#tab-Pingtung').attr('aria-labelledby', 'tab-Pingtung')
            //$('#tab-Pingtung').find('#solarCard').attr('id', 'solarCardPingtung');
            //$('#tab-Pingtung').find('#solarTable').attr('id', 'solarTablePingtung');

            //電站卡片


            $('.nav-tabs a[href="#tab-newtaipei"]').tab('show');

            TableDisplay();
        });
        function CardDisplay() {
            $('.TableArea').hide();
            $('.solarCard').show();

        }
        function TableDisplay() {
            $('.TableArea').show();
            $('.solarCard').hide();
        }
    </script>
}