@extends('dashboard.layouts.index')
@section('page_title')
    @lang('global.users')
@stop


@section('breadcrumb')
    <div class="breadcrumb-item">
        <a href="{{route("dashboard.users.user.index")}}"> @lang('global.users')</a>
    </div>
    <div class="breadcrumb-item">
        @lang('global.create_user')
    </div>
@stop

@section('content')
        <form class="form" id="form" enctype="multipart/form-data" action="{{route("dashboard.users.user.store")}}"
              novalidate
              method="POST">
            @csrf
            <div class="row">
                <div class="col-sm-12 col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">@lang('global.avatar')</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                @component('dashboard.components.edit_image' )
                                @endcomponent
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-8">
                    <div class="card">
                        <form>
                            <div class="card-header">
                                <h4>@lang("global.user_information")</h4>
                            </div>
                            <div class="card-body">
                                @component('dashboard.components.edit_text' , [
                                        "name" => "name",
                                        "type" => "text",
                                        "title" => __("global.name"),
                                        "col" => "col-md-10"
                                    ])
                                @endcomponent


                                @component('dashboard.components.edit_text' , [
                                        "name" => "phone_number",
                                        "type" => "text",
                                        "title" => __("global.phone_number"),
                                        "col" => "col-md-10"
                                    ])
                                @endcomponent

                                @component('dashboard.components.edit_text' , [
                                        "name" => "email",
                                        "type" => "email",
                                        "title" => __("global.email"),
                                        "col" => "col-md-10"
                                    ])
                                @endcomponent

                                @component('dashboard.components.edit_text' , [
                                        "name" => "password",
                                        "type" => "password",
                                        "title" => __("global.password"),
                                        "col" => "col-md-10"
                                    ])
                                @endcomponent

                                @component('dashboard.components.edit_text' , [
                                    "name" => "nationality",
                                    "type" => "text",
                                    "title" => __("global.nationality"),
                                    "col" => "col-md-10"
                                ])
                                @endcomponent

                                @component('dashboard.components.edit_text' , [
                                    "name" => "address",
                                    "type" => "text",
                                    "title" => __("global.address"),
                                    "col" => "col-md-10"
                                ])
                                @endcomponent


                                @component('dashboard.components.edit_text' , [
                                    "name" => "Place of work (branch)",
                                    "type" => "text",
                                    "title" => __("global.Placewor"),
                                    "col" => "col-md-10"
                                ])
                                @endcomponent




                        <div class="form-group row mb-4">
                            <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">@lang("global.gender")</label>
                            <div class="col-sm-12 col-md-7">
                                <div class="selectgroup w-100">
                                    <label class="selectgroup-item">
                                        <input type="radio" name="gender" value="male"class="selectgroup-input">
                                        <span class="selectgroup-button">@lang('global.male')</span>
                                    </label>
                                    <label class="selectgroup-item">
                                        <input type="radio" name="gender" value="female"class="selectgroup-input" checked="">
                                        <span class="selectgroup-button">@lang('global.female')</span>
                                    </label>
                                </div>
                            </div>
                        </div>


                           {{-- <script type="text/javascript"
                                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt_lOJ6KkQ6r30qYDzFY5ZDJF4XzqaZeU">
                           </script>
                        <div id="mapuser" style=" position: relative;width: 100%;height: 500px;overflow: hidden;"></div> --}}


                            <div class="card-footer text-right">
                                <button class="btn btn-primary">@lang("global.save")</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </form>
@stop

@push('js')
    <script>
        /**
         * Create new map
         */
        var infowindow;
        var map;
        var red_icon =  'http://maps.google.com/mapfiles/ms/icons/red-dot.png' ;
        var purple_icon =  'http://maps.google.com/mapfiles/ms/icons/purple-dot.png' ;
        var locations = [31.941751, 35.906066];
        var myOptions = {
            zoom: 12,
            center: new google.maps.LatLng(31.941751, 35.906066),
            mapTypeId: 'roadmap'
        };
        map = new google.maps.Map(document.getElementById('mapuser'), myOptions);

        /**
         * Global marker object that holds all markers.
         * @type {Object.<string, google.maps.LatLng>}
         */
        var markers = {};

        /**
         * Concatenates given lat and lng with an underscore and returns it.
         * This id will be used as a key of marker to cache the marker in markers object.
         * @param {!number} lat Latitude.
         * @param {!number} lng Longitude.
         * @return {string} Concatenated marker id.
         */
        var getMarkerUniqueId= function(lat, lng) {
            return lat + '_' + lng;
        };

        /**
         * Creates an instance of google.maps.LatLng by given lat and lng values and returns it.
         * This function can be useful for getting new coordinates quickly.
         * @param {!number} lat Latitude.
         * @param {!number} lng Longitude.
         * @return {google.maps.LatLng} An instance of google.maps.LatLng object
         */
        var getLatLng = function(lat, lng) {
            return new google.maps.LatLng(lat, lng);
        };

        /**
         * Binds click event to given map and invokes a callback that appends a new marker to clicked location.
         */
        var addMarker = google.maps.event.addListener(map, 'click', function(e) {
            var lat = e.latLng.lat(); // lat of clicked point
            var lng = e.latLng.lng(); // lng of clicked point
            var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
            var marker = new google.maps.Marker({
                position: getLatLng(lat, lng),
                map: map,
                animation: google.maps.Animation.DROP,
                id: 'marker_' + markerId,
                html: "    <div id='info_"+markerId+"'>\n" +
                    "        <table class=\"map1\">\n" +
                    "            <tr>\n" +
                    "                <td><a>Name:</a></td>\n" +
                    "                <td><textarea  id='manual_name' placeholder='Name'></textarea></td></tr>"+
                    "<tr><td><a>Distance:</a></td>\n" +"<td><input type='number'  id='manual_distance' placeholder='Distance' value="+10+"'/></td>"+
                    "</tr>\n" +
                    "            <tr><td></td><td><input class='btn btn-primary' type='button' value='Save' onclick='saveData("+lat+","+lng+")'/></td></tr>\n" +
                    "        </table>\n" +
                    "    </div>"
            });
            markers[markerId] = marker; // cache marker in markers object
            bindMarkerEvents(marker); // bind right click event to marker
            bindMarkerinfo(marker); // bind infowindow with click event to marker
        });

        /**
         * Binds  click event to given marker and invokes a callback function that will remove the marker from map.
         * @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded.
         */
        var bindMarkerinfo = function(marker) {
            google.maps.event.addListener(marker, "click", function (point) {
                var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
                var marker = markers[markerId]; // find marker
                infowindow = new google.maps.InfoWindow();
                infowindow.setContent(marker.html);
                infowindow.open(map, marker);
                // removeMarker(marker, markerId); // remove it
            });
        };



        var i ; var confirmed = 0;
        for (i = 0; i < locations.length; i++) {
            console.log(locations[i]);
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                map: map,
                icon :   locations[i][4] === '1' ?  red_icon  : purple_icon,
                html: "<div>\n" +
                    "<table class=\"map1\">\n" +
                    "<tr>\n" +
                    "<td><a>Name:</a></td>\n" +
                    "<td>"+locations[i][3]+"</td>"+
                    "</tr>\n" +
                    "<tr>\n" +
                    "<td><a>Distance:</a></td>\n" +
                    "<td>"+locations[i][2]+" m</td>"+
                    "</tr>\n"  +
                    "            <tr><td></td><td><a href='{{url('dashboard/branches/deleteMap')}}" + "/" +locations[i][4]+"'><lable class='btn btn-danger' value='Delete' >Delete</lable></a></td></tr>\n" +
                    "</table>\n" +
                    "</div>"
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow = new google.maps.InfoWindow();
                    confirmed =  locations[i][4] === '1' ?  'checked'  :  0;
                    $("#confirmed").prop(confirmed,locations[i][4]);
                    $("#id").val(locations[i][0]);
                    $("#name").val(locations[i][3]);
                    $("#distance").val(locations[i][2]);
                    $("#form").show();
                    infowindow.setContent(marker.html);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }

        /**
         * Binds right click event to given marker and invokes a callback function that will remove the marker from map.
         * @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded.
         */
        var bindMarkerEvents = function(marker) {
            google.maps.event.addListener(marker, "rightclick", function (point) {
                var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
                var marker = markers[markerId]; // find marker
                removeMarker(marker, markerId); // remove it
            });
        };

        /**
         * Removes given marker from map.
         * @param {!google.maps.Marker} marker A google.maps.Marker instance that will be removed.
         * @param {!string} markerId Id of marker.
         */
        var removeMarker = function(marker, markerId) {
            marker.setMap(null); // set markers setMap to null to remove it from map
            delete markers[markerId]; // delete marker instance from markers object
        };


        /**
         * loop through (Mysql) dynamic locations to add markers to map.
         */


        /**
         * SAVE save marker from map.
         * @param lat  A latitude of marker.
         * @param lng A longitude of marker.
         */
        function saveData(lat,lng) {
            var name = document.getElementById('manual_name').value;
            var distance = document.getElementById('manual_distance').value;
            var url = 'save?add_location&name=' + name + '&distance='+ distance + '&lat=' + lat + '&lng=' + lng;
            downloadUrl(url, function(data, responseCode) {
                if (responseCode === 200  && data.length > 1) {
                    var markerId = getMarkerUniqueId(lat,lng); // get marker id by using clicked point's coordinate
                    var manual_marker = markers[markerId]; // find marker
                    manual_marker.setIcon(purple_icon);
                    infowindow.close();
                    infowindow.setContent("<div style=' color: purple; font-size: 25px;'>"+data+"</div>");
                    infowindow.open(map, manual_marker);
                }else{
                    console.log(responseCode);
                    console.log(data);
                    infowindow.setContent("<div style='color: red; font-size: 25px;'>Inserting Errors</div>");
                }
            });
        }

        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    callback(request.responseText, request.status);
                }
            };

            request.open('GET', url, true);
            request.send(null);
        }


    </script>
@endpush