<%@ page title="" language="C#" masterpagefile="~/MasterFile/TimeCheck.master" autoeventwireup="true" inherits="Masters_MapClockIn, App_Web_3fkcmghr" %>

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContentPH" runat="Server">
    <script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

    <script type="text/javascript">
        var GOOGLE_MAP_KEY = "mykeyofgoogleapi";
        function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
                '&key=' + GOOGLE_MAP_KEY + '&callback=initialize'; //& needed
            document.body.appendChild(script);
        }
        window.onload = loadScript;
    </script>


    <script>
        // Note: This example requires that you consent to location sharing when
        // prompted by your browser. If you see the error "The Geolocation service
        // failed.", it means you probably did not give permission for the browser to
        // locate you.
        var map, infoWindow;
        function initMap() {
            var infoWindow = new google.maps.InfoWindow();
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (p) {
                    var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
                    var mapOptions = {
                        center: LatLng,
                        zoom: 15,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ 'latLng': LatLng }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                document.getElementById('lblResult').innerHTML = results[0].formatted_address;
                            }
                        }
                    });
                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                    var marker = new google.maps.Marker({
                        position: LatLng,
                        map: map,
                        title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
                    });
                    google.maps.event.addListener(marker, "click", function (e) {

                        infoWindow.setContent(marker.title);
                        infoWindow.open(map, marker);
                    });
                });
            } else {
                alert('Geo Location feature is not supported in this browser.');
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }
    </script>

    <div class="content-header">
        <h1 style="background-image: url('../dist/img/city.png'); background-repeat: no-repeat; padding-left: 35px">
            <asp:Label ID="lbl_Header" runat="server"></asp:Label>
        </h1>
        <asp:SiteMapPath ID="site" runat="server" CssClass="breadcrumb">
            <NodeStyle CssClass="active" />
        </asp:SiteMapPath>
    </div>
    <div class="content">
        <div class="form-horizontal">
            <div class="border-table new-space" style="margin-top: 0px">
                <div class="row form-group">
                    <div class="col-md-12" style="overflow: auto; overflow-y: hidden; padding-bottom: 10px">
                        <div id="map" style="width: 100%; height: 300px; border: 2px solid #BDE4F8;">
                        </div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <div class="row form-group">
                            <div class="col-md-2">
                                <asp:Label ID="lblempid" runat="server"></asp:Label>
                            </div>
                            <div class="col-md-9">
                                <asp:Label ID="lblempidvalue" runat="server" CssClass="form-control"></asp:Label>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-2">
                                <asp:Label ID="lblCurrentloc" runat="server" />
                            </div>
                            <div class="col-md-9">
                                <label id="lblResult" runat="server" cssclass="form-control" />
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-2">
                                <asp:Label ID="lblcurrentdatTime" runat="server" />
                            </div>
                            <div class="col-md-9">
                                <asp:Label ID="lblCurrentDate" runat="server" CssClass="form-control"></asp:Label>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-2">
                                <asp:Label ID="lbllastpunch" runat="server" />
                            </div>
                            <div class="col-md-9">
                                <asp:Label ID="lblLastPunchval" runat="server" CssClass="form-control"></asp:Label>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-2">
                                <asp:LinkButton ID="lnkbtnClockIn" CommandName="Clock In" Class="btn save-btn" runat="server" CausesValidation="true"
                                    OnClick="btn_Add_Click" />
                            </div>
                            <div class="col-md-2">
                                <asp:LinkButton ID="lnkbtnClockOut" CommandName="Clock Out" Class="btn save-btn" runat="server" CausesValidation="true"
                                    OnClick="btn_Add_Click" />
                            </div>
                            <div class="col-md-2">
                                <asp:LinkButton ID="lnkbtnLunchOut" CommandName="Lunch Out" Class="btn save-btn" runat="server" CausesValidation="true"
                                    OnClick="btn_Add_Click" />
                            </div>
                            <div class="col-md-2">
                                <asp:LinkButton ID="lnkbtnLunchIn" CommandName="Lunch In" Class="btn save-btn" runat="server" CausesValidation="true"
                                    OnClick="btn_Add_Click" />
                            </div>
                            <div class="col-md-2">
                                <asp:LinkButton ID="lnkbtnBreakOut" CommandName="Break Out" Class="btn save-btn" runat="server" CausesValidation="true"
                                    OnClick="btn_Add_Click" />
                            </div>
                            <div class="col-md-2">
                                <asp:LinkButton ID="lnkbtnBreakIn" CommandName="Break In" Class="btn save-btn" runat="server" CausesValidation="true"
                                    OnClick="btn_Add_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
