@page
@model PCBang.IndexModel
@using Microsoft.AspNetCore.Http
@using JtkMainServer.Managers
@{
    ViewData["Title"] = "PC방";
    ViewData["LoggedInUserId"] = HttpContext.Session.GetString("LoggedInUserId");
    ViewData["LoggedIn"] = ViewData["LoggedInUserId"] != null;
}

<div class="row" style="margin-top:20px">
    <div class="col-md-6">
        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b8a1c577f3130c11f37766981e70beb5&libraries=services"></script>
        <script type="text/javascript">

            var mapContainer = document.getElementById('map'), // 지도를 표시할 div
                mapOption = {
                    center: new daum.maps.LatLng(36.56982, 127.69383), // 지도의 중심좌표
                    level: 13, // 지도의 확대 레벨
                    mapTypeId: daum.maps.MapTypeId.ROADMAP // 지도종류
                };

            // 지도를 생성한다
            //var map = new daum.maps.Map(mapContainer, mapOption);

            // 주소-좌표간 변환 서비스 객체를 생성한다.
            var geocoder = new daum.maps.services.Geocoder();

            // GPS 이용해서 현위치 탐색 함수
            function refreshLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                } else {
                    alert("GPS 사용이 불가능합니다.");
                    $("#address").html("사용 불가");
                    refreshList(0, 0);
                }
            }
            refreshLocation();

            // 현주소 문자열 HTML 작성
            function showPosition(position) {
                $("#address").html("");
                geocoder.coord2RegionCode(position.coords.longitude, position.coords.latitude, function (result, status) {
                    if (status === daum.maps.services.Status.OK) {
                        $("#address").html(result[0].address_name);
                    } else {
                        $("#address").html("알 수 없음");
                    }
                    refreshList(position.coords.latitude, position.coords.longitude);
                    //refreshList(0, 0);
                });
            }

            // 좌표로 리스트와 맵 갱신
            function refreshList(lat, lng) {
                if (lat > 0 && lng > 0) {
                    //map.setCenter(new daum.maps.LatLng(lat, lng));
                    //map.setLevel(8);
                } else {
                    
                }
                $("#list").html("<img src=\"/images/loading_spinner.gif\" width=\"100\" />");
                $.ajax({
                    async: true,
                    type: 'get',
                    url: "/PCBang/List",
                    timeout: 1000,
                    cache: false,
                    data: {
                        latitude: lat,
                        longitude: lng
                    },
                    error: function (request, status, error) {
                        $("#list").html("목록을 불러오지 못했습니다." + error);
                    },
                    success: function (response, status, request) {
                        $("#list").html(response);
                    }
                });
            }
        </script>
        <h1><a asp-page="/Index" class="glyphicon glyphicon-menu-left" aria-hidden="true"></a>PC방</h1>
        <p>가맹 PC방 목록입니다.</p>
        <h3>현위치</h3>
        <a style="color: display:inline; padding:5px; margin:5px; margin-right:10px;" href="javascript:refreshLocation()" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> 다시 탐색</a><h4 style="display:inline" id="address"></h4>
        @*<div id="map" class="form-control" style="border-radius:10px; width:100%;height:250px;"></div>*@
        
        <hr />
        <h3>내 주변 PC방</h3>
        <div id="list"></div>
        <hr />
    </div>
</div>

<div>
    <a asp-page="/Index">홈으로 이동</a>
</div>