@extends('layouts.main_without_top_button', ['title' => 'Cities | ' . config('app.name')])
@section('title')
    Cities
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Cities</li>
    </ul>
@stop
@section('contentinner')
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <style>
        .pac-container {
            z-index: 99999;
        }
    </style>
    <div class="tabbable">
        @include('operations.settings.routes.includes.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="row-fluid" style="margin-bottom: 8px;">
                    <div class="span12  profile-left">
                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">

                                <li  class="right btn-group">
                                    <a class="btn" onclick="create('{{ route('cities.create') }}')">NEW CITY</a>
                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->
                        <button onclick="modelShow('us6-dialog')" data-toggle="modal">Click hear to open dialog</button>
                        <table class="table table-striped table-bordered table-condensed" id="cities_datatable_index">
                            <thead>
                            <tr>
                                <th style="width: 5%">S/N</th>
                                <th>Name</th>
                                <th>Country</th>
                                <th>Latitude</th>
                                <th>Longitude</th>
                                <th style="width: 5%">Action</th>
                            </tr>
                            </thead>
                        </table>
                    </div><!--span6-->
                </div><!--row-fluid-->
            </div><!--tab-pane-->
        </div>
    </div>

    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog"
         data-backdrop="static" class="modal  hide fade in" id="us6-dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">CREATE CITY</h3>
        </div>
        <div class="modal-body">
            <div class="form-horizontal">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="span6">
                            <label class="control-label span4" for="Location">Location:</label>

                            <div class="controls span8"><input type="text" class="span12" id="us3-address"/></div>
                        </div>
                        <div class="span6">
                            <label class="control-label span4" for="Radius">Radius:</label>

                            <div class="controls span8"><input type="text" class="span12" id="us3-radius"/></div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="span6">
                            <label class="control-label span4" for="Location">Lat.:</label>

                            <div class="controls span8"><input type="text" class="span12" id="us3-lat"/></div>
                        </div>
                        <div class="span6">
                            <label class="control-label span4" for="Radius">Long.:</label>

                            <div class="controls span8"><input type="text" class="span12" id="us3-lon"/></div>
                        </div>
                    </div>
                </div>
                <div class="clearfix">&nbsp;</div>
                <div class="row-fluid">
                    <div class="span12">
                        <div id="us3" style="width: 100%; height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyB79NNEPOp-SUuaqOMW7EtIxtss_5MbdnI&callback=initMap"></script>
    <script type="text/javascript">
//        function initMap() {
//            var map = new google.maps.Map(document.getElementById('us3'), {
//                zoom: 6,
//                center: {lat: 41.85, lng: -87.65}
//            });
//        }

        var main_datatable = jQuery('#cities_datatable_index').DataTable({
            "oLanguage": {
                "sLoadingRecords": startSpinner(),
                "sZeroRecords": "No City records to display.",
                "sProcessing": "Please wait - loading records...",
                "sInfoEmpty": "No entries to display."
            },
            "initComplete": function (settings, json) {
                stopSpinner();
            },
            ajax: {
                url: '{{ route('cities.datatable.index') }}',
                data: function (d) {
                    d.city_id = jQuery('#name').val();
                },
                error: function (xhr, textStatus, error) {
                    if (textStatus === 'timeout') {
                        alert('Timout error. The server took too long to send back the data.\nPlease try again.');
                    }
                    main_datatable.fnProcessingIndicator(false);
                }//function
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {"class": "link", data: 'id'},
                {"class": "link", data: 'name'},
                {"class": "link", data: 'country'},
                {"class": "link", data: 'latitude'},
                {"class": "link", data: 'longitude'},
                {"class": "link", data: 'action'}
            ],
            "bStateSave": true
        });

        $('#create_route_form').on('submit', function (e) {
            e.preventDefault();
            var loading_order_form_id = jQuery(this);
            var formAction = loading_order_form_id.attr('action');
            var formData = loading_order_form_id.serialize();

            jQuery.ajax({
                url: formAction,
                type: 'POST',
                data: formData,
                success: function (data) {
                    console.log(data);

                    if (data.state === 'Done') {
                        resetFormAndClose(loading_order_form_id);
                        jQuery.jGrowl(data.msg);
                        $('#route_index_datatable').dataTable().fnFilter(this.value);
                    } else if (data.state === 'Fail') {
                        jQuery.jGrowl(data.msg);
                    }
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                }
            });
        });

//        jQuery(document).ready(function () {
//            $('#us3').locationpicker({
//                location: {
//                    latitude: -6.792354,
//                    longitude: 39.20832840000003
//                },
//                radius: 300,
//                zoom: 4,
//                scrollwheel: true,
//                inputBinding: {
//                    latitudeInput: $('#us3-lat'),
//                    longitudeInput: $('#us3-lon'),
//                    radiusInput: $('#us3-radius'),
//                    locationNameInput: $('#us3-address')
//                },
//                enableAutocomplete: true,
//                enableReverseGeocode: true,
//                markerIcon: 'http://www.iconsdb.com/icons/preview/tropical-blue/map-marker-2-xl.png',
//                onchanged: function (currentLocation, radius, isMarkerDropped) {
//                    var addressComponents = $('#us3').locationpicker('map').location.addressComponents;
//                    console.log($('#us3').locationpicker('map').location);  //latlon
//                    updateControls(addressComponents); //Data
//                },
//                onlocationnotfound: function (locationName) {
//                },
//                oninitialized: function (component) {
//                }
//            });
//            function updateControls(addressComponents) {
//                $('#us3-address').val(addressComponents.formattedAddress);
//                console.log(addressComponents);
//            }
//
//            $('#us6-dialog').on('shown.bs.modal', function () {
//                $('#us3').locationpicker('autosize');
//            });
//
//
//
//            var location_id_ = document.getElementById('city');
//            google.maps.event.addDomListener(window, 'load', initialize(location_id_));
//
//            $("#city").on('change', function () {
//                var geocoder = new google.maps.Geocoder();
//                geocoder.geocode({
//                    'address': $('#city').val()
//                }, function (results, status) {
//                    if (status == google.maps.GeocoderStatus.OK) {
//                        $('#latitude').val(results[0].geometry.location.lat());
//                        $('#longitude').val(results[0].geometry.location.lng());
//                    } else {
//                        alert("Something got wrong " + status);
//                    }
//                });
//            });
//        });
    </script>
@stop