@page
@model Manage.RegisterPartnerModel
@using Microsoft.AspNetCore.Http
@using JtkMainServer.ApiModels
@using JtkMainServer.Managers
@{
    //ViewData["Title"] = "매출";
    ViewData["LoggedInUserId"] = HttpContext.Session.GetString("LoggedInUserId");
    ViewData["LoggedIn"] = ViewData["LoggedInUserId"] != null;
    ViewData["ActivatedTabIndex"] = 2;

    ViewData["Title"] = $"가맹점 등록";
}

<div class="row" style="margin-top:20px">
    <div class="col-md-6">
        <h1><a href="/Manage/Partners" class="glyphicon glyphicon-menu-left" aria-hidden="true"></a>@ViewData["Title"]</h1>

        <p>JTK PC방에 신규 가맹점을 등록합니다.</p>
        <hr />
        <form method="post" id="form">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="RegisterPartner.Name" class="control-label"></label>
                <input asp-for="RegisterPartner.Name" class="form-control" />
                <span asp-validation-for="RegisterPartner.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="RegisterPartner.Introduction" class="control-label"></label>
                <textarea asp-for="RegisterPartner.Introduction" style="height:150px; overflow-y:auto" class="form-control"></textarea>
                <span asp-validation-for="RegisterPartner.Introduction" class="text-danger"></span>
            </div>
            <hr />
            <div class="form-group">
                <label asp-for="RegisterPartner.Id" class="control-label"></label>
                <input asp-for="RegisterPartner.Id" class="form-control" />
                <span asp-validation-for="RegisterPartner.Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="RegisterPartner.Password" class="control-label"></label>
                <input asp-for="RegisterPartner.Password" class="form-control" type="password" />
                <span asp-validation-for="RegisterPartner.Password" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="RegisterPartner.PasswordConfirm" class="control-label"></label>
                <input asp-for="RegisterPartner.PasswordConfirm" class="form-control" type="password" />
                <span asp-validation-for="RegisterPartner.PasswordConfirm" class="text-danger"></span>
            </div>
            @*<script>
            function getBase64() {
                var file = document.querySelector('#file').files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    alert(reader.result);
                };
                reader.onerror = function (error) {
                    alert("에러");//console.log('Error: ', error);
                };
            }
        </script>
        <input type="file" id="file" onchange="getBase64()" />*@
            <hr />
            <div class="form-group">
                <label asp-for="PaymentTime.Time" class="control-label"></label>
                <p>매일<input asp-for="PaymentTime.Time" type="time" class="form-control" style="width: 150px; display: inline; margin: 0px 8px;" />에 지급</p>
                <span asp-validation-for="PaymentTime.Time" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PaymentTime.AccountNumber" class="control-label"></label>
                <p>신한<input asp-for="PaymentTime.AccountNumber" type="text" class="form-control" style="width: 150px; display: inline; margin: 0px 8px;" />으로 지급</p>
                <span asp-validation-for="PaymentTime.AccountNumber" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PaymentTime.Royalty" class="control-label"></label>
                <p>매출의 <input asp-for="PaymentTime.Royalty" type="number" min="0" max="10" step="0.5" class="form-control" style="width: 80px; display: inline; margin: 0px 8px; text-align:right;" />%를 제외하고 지급</p>
                <span asp-validation-for="PaymentTime.Royalty" class="text-danger"></span>
            </div>
            <hr />
            <div class="form-group">
                <script type="text/javascript">
                    function showHere() {
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(showPosition);
                        } else {
                            alert("GPS 사용이 불가능합니다.");
                        }
                    }
                    function showPosition(position) {
                        map.setCenter(new daum.maps.LatLng(position.coords.latitude, position.coords.longitude));
                        map.setLevel(7);
                    }

                </script>
                <label asp-for="RegisterPartner.Location" style="display:inline;" class="control-label"></label><a style="margin-bottom:5px; float:right" href="javascript:showHere()" class="btn btn-default"><span class="glyphicon glyphicon-screenshot"></span> 현위치 보기</a>
                <input asp-for="RegisterPartner.Location" id="location" type="hidden" />
                <span asp-validation-for="RegisterPartner.Location" id="locationSpan" class="text-danger"></span>
                <div id="map" class="form-control" style="border-radius:10px; width:100%;height:250px;"></div>
                <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b8a1c577f3130c11f37766981e70beb5&libraries=services"></script>
                <script>
                    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();

                    var marker;
                    @if (ViewData.TryGetValue("Location", out var location) && string.IsNullOrWhiteSpace(location as string) == false) {
                        <text>
                        marker = new daum.maps.Marker({
                            position: new daum.maps.LatLng @location , // 마커의 좌표
                            map: map // 마커를 표시할 지도 객체
                        });
                        </text>
                    }

                    // 지도 클릭 이벤트를 등록한다 (좌클릭 : click, 우클릭 : rightclick, 더블클릭 : dblclick)
                    daum.maps.event.addListener(map, 'click', function (mouseEvent) {
                        $("#location").val(mouseEvent.latLng.toString());  // input에 입력
                        $("#locationSpan").html("");  // 경고메시지 삭제

                        var coord = mouseEvent.latLng;

                        if (marker == undefined) {
                            marker = new daum.maps.Marker({
                                position: coord, // 마커의 좌표
                                map: map // 마커를 표시할 지도 객체
                            });
                        } else {
                            marker.setPosition(coord);
                        }

                        geocoder.coord2Address(coord.getLng(), coord.getLat(), function (result, status) {
                            if (status === daum.maps.services.Status.OK) {
                                $("#address").val(result[0].address.address_name);  // input에 입력
                            }
                        });
                    });

                    // 지도 중심 좌표 변화 이벤트를 등록한다
                    daum.maps.event.addListener(map, 'center_changed', function () {
                        //console.log('지도의 중심 좌표는 ' + map.getCenter().toString() + ' 입니다.');
                    });

                    // 지도 확대 레벨 변화 이벤트를 등록한다
                    daum.maps.event.addListener(map, 'zoom_changed', function () {
                        //console.log('지도의 현재 확대레벨은 ' + map.getLevel() + '레벨 입니다.');
                    });
                </script>
            </div>
            <div class="form-group">
                <label asp-for="RegisterPartner.Address" class="control-label"></label>
                <input asp-for="RegisterPartner.Address" id="address" class="form-control" />
                <span asp-validation-for="RegisterPartner.Address" class="text-danger"></span>
            </div>
            <div class="form-group">
                <span class="text-danger field-validation-error">@Model.ErrorMessage</span>
            </div>
            <div class="form-group">
                <span class="text-success">@Model.Message</span>
            </div>
            <div class="form-group">
                @*<input type="submit" value="등록" class="btn btn-warning" style="width:100%" />*@
                <a style="width:100%" href="javascript:document.getElementById('form').submit()" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span> 등록</a>
                <input type="submit" hidden="hidden" />
            </div>
        </form>
    </div>
</div>

<div>
    <a href="/Manage/Partners">이전 페이지로</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
