@{
    ViewData["MainNum"] = "1";
    ViewData["SubNum"] = "1";
    ViewData["Title"] = "地圖總覽";
}
<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 id="update_at"></span></li>
</ol>

<!-- Your main content goes below here: -->

<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative; ">
    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
</div>

@*<div class="row mb-5">*@
<div class="row mb-5" style="display: flex; justify-content: center;">
    <div class="card-group">
        <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
            <div class="card-header bg-fusion-25 py-2 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>今日</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>
        <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
            <div class="card-header bg-fusion-25 py-2 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">Wh/m<sup>2</sup></div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <p>今日</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="avg_irradiance">0.00</span></p>
                </div>
            </div>
        </div>
        <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
            <div class="card-header bg-fusion-25 py-2 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>今日</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>30天平均</p>
                    <p><span class="color-info-700 fs-xl font-weight-bold" id="avg_PR">0.00</span></p>
                </div>
            </div>
        </div>
        <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
            <div class="card-header bg-fusion-25 py-2 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">kWh/kWp</div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <p>今日</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="avg_kwhkwp">0.00</span></p>
                </div>
            </div>
        </div>
        <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
            <div class="card-header bg-fusion-25 py-2 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>今日</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>
        @if (ViewBag.myUser.Role.Auths.Contains("ShowMoney"))
        {
            <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
                <div class="card-header bg-fusion-25 py-2 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">NTD</div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <p>今日發電金額</p>
                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh_money_by_myself">0.00</span></p>
                    </div>
                </div>
            </div>
            <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
                <div class="card-header bg-fusion-25 py-2 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">NTD</div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <p>今日發電金額</p>
                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh_money_from_tenant">0.00</span></p>
                    </div>
                </div>
            </div>
            <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
                <div class="card-header bg-fusion-25 py-2 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">NTD</div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <p>今日省電金額</p>
                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh_money_save_power">0.00</span></p>
                    </div>
                </div>
            </div>
        }
    </div>

        
    @*<div class="card-group">
        @if (ViewBag.myUser.Role.Auths.Contains("ShowMoney"))
        {
            <div class="card" style="min-width: 16rem; max-width: 16rem;">
                <div class="card-header bg-fusion-25 py-2 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">NTD</div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <p>今日發電金額</p>
                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh_money_by_myself">0.00</span></p>
                    </div>
                </div>
            </div>
            <div class="card" style="min-width: 16rem; max-width: 16rem;">
                <div class="card-header bg-fusion-25 py-2 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">NTD</div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <p>今日發電金額</p>
                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh_money_from_tenant">0.00</span></p>
                    </div>
                </div>
            </div>
            <div class="card" style="min-width: 16rem; max-width: 16rem;">
                <div class="card-header bg-fusion-25 py-2 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">NTD</div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <p>今日省電金額</p>
                        <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh_money_save_power">0.00</span></p>
                    </div>
                </div>
            </div>
        }
    </div>*@
        
    <div class="col-md-8 col-sm-12">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>電站分佈圖</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="map-respondive">
                        <div id="map" style="width: 100%; height:450px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
    <div class="col-md-4 col-sm-12">
        <div class="card-group">
            @*<div class="col-xl-6 mb-4">*@
            <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
                <div class="card-header bg-fusion-25 py-2 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>
                <div class="card-body" style="min-height: 148px;">
                    <p class="text-center display-3"><span class="color-info-700 font-weight-bold" id="total_power_station_count">0</span></p>
                    <p class="text-right mb-0">廠</p>
                </div>
            </div>
            @*</div>*@

            @*<div class="col-xl-6 mb-4">*@
            <div class="col card px-0 mx-2 my-2" style="min-width: 14rem; max-width: 14rem;">
                <div class="card-header bg-fusion-25 py-2 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>
                <div class="card-body" style="min-height: 148px;">
                    <p class="text-center display-3"><span class="color-info-700 font-weight-bold" id="total_capacity">0.00</span></p>
                    <p class="text-right mb-0">MWp</p>
                </div>
            </div>
            @*</div>*@
            <div class="col-xl-12">
                <div id="panel-1" class="panel">
                    <div class="panel-hdr">
                        <h2>電站分佈小計</h2>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <table id="capacity-Table" class="table text-center m-0">
                                <thead class="thead-themed">
                                    <tr>
                                        <th>縣市</th>
                                        <th>電站數量</th>
                                        <th>電廠裝置容量 kWp</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="row">
    <div class="col-xl-12">
        <div id="map" style="width: 100%; height:60vh"></div>
    </div>
</div>


    @section Scripts{

        @*<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>*@
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBF-NZ6zKpzthzB8cgFYVfAWPu_ZhSFR1c&callback=initMap" async></script>
        <script src="https://unpkg.com/@@googlemaps/markerclustererplus/dist/index.min.js"></script>

        <script>
        var capacityTable;
        var mapOverview;
        var locations = [];

        function showLoading() {
            var i = document.getElementById("loading");
            i.style.display = "block";
        }

        function hideLoading() {
            var i = document.getElementById("loading");
            i.style.display = "none";
        }

        $(function () {
            showLoading();
            //#region 公司管理列表 DataTable
            capacityTable = $("#capacity-Table").DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "columns": [{
                    "data": "cityName"
                }, {
                        "data": "subPowerStationCount",
                        "render": function (data, type, row) {
                            return toThousands(data);
                        }
                }, {
                        "data": "subTotalCapacity"
                    }],
                "columnDefs": [{
                    'targets': 2,
                    'searchable': false,
                    'orderable': false,
                    'createdCell': function (td, cellData, rowData, row, col) {
                        @*$(td).append('<div class="row"></div>');*@
                        cellData = cellData.toFixed(3);
                        $(td).html(toThousands(cellData));
                    }
                }],
                "language": {
                    "emptyTable": "查無資料",
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                "data": []
            });
            //#endregion

            var url = "/MapOverview/GetMapOverview";
            $.post(url, null, function (rel) {
                if (rel.code != "0000") {
                    hideLoading();
                    toast_error(rel.msg);
                    return;
                }

                mapOverview = rel.data;

                $("#today_kwh").html(toThousands(mapOverview.today_kwh.toFixed(2)));
                $("#total_kwh").html(toThousands(mapOverview.total_kwh.toFixed(2)));
                $("#today_irradiance").html(toThousands(mapOverview.today_irradiance.toFixed(2)));
                $("#avg_irradiance").html(toThousands(mapOverview.avg_irradiance.toFixed(2)));
                $("#today_PR").html(toThousands(mapOverview.today_PR.toFixed(2)));
                $("#avg_PR").html(toThousands(mapOverview.avg_PR.toFixed(2)));
                $("#today_kwhkwp").html(toThousands(mapOverview.today_kwhkwp.toFixed(2)));
                $("#avg_kwhkwp").html(toThousands(mapOverview.avg_kwhkwp.toFixed(2)));
                $("#today_carbon").html(toThousands(mapOverview.today_carbon.toFixed(2)));
                $("#total_carbon").html(toThousands(mapOverview.total_carbon.toFixed(2)));
                @if (ViewBag.myUser.Role.Auths.Contains("ShowMoney"))
                {
                    <text>
                    $('#today_kwh_money_by_myself').html(toThousands(mapOverview.today_solarTypeMoney_self_built_wholesale.toFixed(2)));
                    $('#today_kwh_money_from_tenant').html(toThousands(mapOverview.today_solarTypeMoney_tenant_built_wholesale.toFixed(2)));
                    $('#today_kwh_money_save_power').html(toThousands(mapOverview.today_solarTypeMoney_self_build.toFixed(2)));
                    </text>
                }
                $("#total_power_station_count").html(toThousands(mapOverview.totalPowerStationCount));
                $("#total_capacity").html(toThousands(mapOverview.totalCapacity.toFixed(3)));
                $("#update_at").html(mapOverview.updatedAt);

                    capacityTable.clear().rows.add(mapOverview.capacityDataTables).draw();

                    //#region google map
                    initMap();
                    hideLoading();
                    //#endregion
                });
        });

        function initMap() {


            mapOverview.powerStations.forEach(function (item, index) {
                var contentString = '<div id="content">' +
                    '<div id="siteNotice"></div>' +
                    '<h1 id="firstHeading" class="firstHeading">' +
                    '<a href="StationOverview/Info?stationId=' + item.id + '" target="_blank">' +
                    item.name +
                    '</a>' +
                    '</h1>' +
                    '<div id="bodyContent">' +
                    '<div class="row">' +
                    '<div class="col-12">' +
                    '<div>今日發電量(kW h)：' + item.today_kWh.toFixed(2) + '</div>'+
                    '<div>今日累積日照量(Wh/m<sup>2</sup>)：' + item.today_irradiance + '</div>'+
                    '<div>日均發電度數(kwh/kwp)：' + item.today_kwhkwp.toFixed(2) + '</div>' +
                    '<div>裝置容量(kWp)：' + item.generatingCapacity.toFixed(3) + '</div>' +
                    '<div>掛錶日期：' + item.electricityMeterAt + '</div>' +
                    '<div>天氣：' + item.wx + '</div>'+
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                if (item.coordinate != null) {
                    var split = item.coordinate.split(',');
                    if (split[0] == undefined || split[0] == null) {
                        split[0] = 23
                    }

                    if (split[1] == undefined || split[1] == null) {
                        split[1] = 122
                    }

                    locations.push([item.name, contentString, split[0], split[1]]); //format:[標籤名、infoWindow、緯度、經度]
                }
            });

            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 7,
                center: { lat: 23.5, lng: 123 },
            });

            var infowindow = new google.maps.InfoWindow();
            // Create an array of alphabetical characters used to label the markers.
            // Add some markers to the map.
            // Note: The code uses the JavaScript Array.prototype.map() method to
            // create an array of markers based on a given "locations" array.
            // The map() method here has nothing to do with the Google Maps API.
            const markers = locations.map((location, i) => {
                 marker = new google.maps.Marker({
                     position: new google.maps.LatLng(location[2], location[3]),
                    @*label: location[0],*@
                    map: map
                 });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(location[1]);

                        google.maps.event.addListener(infowindow, 'domready', function () {
                            $(document).find('#content').parent().css('overflow-x', 'hidden');

                        });

                        infowindow.open(map, marker);
                    }
                })(marker, i));

                return marker;
            });
            // Add a marker clusterer to manage the markers.
            new MarkerClusterer(map, markers, {
                imagePath:
                    "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
            });
        }
        </script>
    }