@extends('layouts.app')
@section('head')
@endsection
@section('content')
<div class="page-container" ng-controller="adminController" ng-init="getdeliverypath()" ng-cloak>
    <div class="left-content">
	    <div class="mother-grid-inner">
		    <div id="loadercontainer" style="display:none" ><div class="loader pull-right"></div></div>
            <div class="clearfix"> </div>
            <div class="validation-form">
            <button type="button" ng-click="adddeliverypath()" class="btn btn-primary searchbutton pull-right">Add Path</button>
                
            <div class="col-md-12 inbox-mail">
               <div class="col-md-12 w3l-table-info table-responsive" >
                    <table id="table">
                        <thead>
                            <tr>
                                <th>Path name</th>
                                <th>Pincode</th>
                                <th>Status</th>
                                <th>Actions </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="time in deliverypath track by $index">
                                <td>  {$time.path_name$}</td>
                                <td><span ng-repeat="zipcode in time.path_pincode">{$zipcode.pincode$},</span></td>
                                <td ng-if="time.status=='1'">Active</td>
                                <td ng-if="time.status=='2'">Deactivated</td>
                                <td>
                                    <a href="javascript:void(0)" title="Delete" ><i class="fa fa-trash" ng-click="removedeliverypath(time.id)" aria-hidden="true"></i></a></td>
                                    
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 pagin">
                        <div class="short_pul pull-right" ng-cloak ng-show="total=='true'">
                        {$begin$} - {$end$} of {$totallength$} <a href="javascript:void(0)"><i class="fa fa-fast-backward i-arrow" ng-click="previouspageseller()" ng-show="previousdisable=='true'"></i></a>  <a href="javascript:void(0)"><i class="fa fa-fast-forward i-arrow" ng-click="nextpageseller()" ng-show="nextdisable=='true'"></i></a>
                        </div>
                   </div>
                </div>
                
                
            </div>
            </div>
            <div class="clearfix"> </div>
            <div class="inner-block">

            </div>
            <div class="modal fade" id="addpath" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">TimeSlot</h4>
                        </div>
                        <div class="modal-body">
                            <div class="validation-form" style="width:100%">
                                <form >
                                    <div class="vali-form" style="width:100%">
                                        <div class="col-md-12 form-group2 group-mail">
                                            <label class="control-label">Path Name</label>
                                            <input type="text" id="path_name" ng-model="timeslot.path_name" class="form-control">  
                                        </div>
                                        <div class="col-md-12 form-group2 group-mail" ng-if="editpertrue">
                                          <label class="control-label">Status</label>
                                            <select ng-model="timeslot.status">
                                                <option value="1">Active</option>
                                                <option value="2">Deactivate</option>
                                            </select>
                                        </div>
                                        <div class="col-md-12 form-group2 group mail">
                                            <div id="map" style="height:400px !important"></div>
                                        </div>
                                            <script>
                                              var polygonpoints=[];
                                              var postalcode=[];
                                              var drawingManager;
                                              function removeLine() {
                                                drawingManager.setMap(null);
                                              }
                                              function initMap() {
                                                var map = new google.maps.Map(document.getElementById('map'), {
                                                  center: {lat: 21.6037101, lng: 39.5097304},
                                                  zoom: 9
                                                });

                                                var drawingManager = new google.maps.drawing.DrawingManager({
                                                  drawingMode: google.maps.drawing.OverlayType.POLYGON,
                                                  drawingControl: true,
                                                  drawingControlOptions: {
                                                    position: google.maps.ControlPosition.TOP_CENTER,
                                                    drawingModes: ['polygon']
                                                  },
                                                  markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
                                                  circleOptions: {
                                                    fillColor: '#ffff00',
                                                    fillOpacity: 1,
                                                    strokeWeight: 5,
                                                    clickable: false,
                                                    editable: true,
                                                    zIndex: 1
                                                  }
                                                });
                                                drawingManager.setMap(map);

                                                google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
                                                for (var i = 0; i < polygon.getPath().getLength(); i++) {
                                                  polygonpoints += polygon.getPath().getAt(i).toUrlValue(6) + ",";
                                                  var splitlat = polygon.getPath().getAt(i).toUrlValue(6).split(',');
                                                  var latlng = new google.maps.LatLng(splitlat[0],splitlat[1]);
                                                  var geocoder= new google.maps.Geocoder();
                                                    geocoder.geocode({'latLng': latlng}, function(results, status) {
                                                      if (status == google.maps.GeocoderStatus.OK) {
                                                        if (results[1]) {
                                                            for(var i=0;i<results[0].address_components.length;i++){
                                                                if(results[0].address_components[i].types[0] == "postal_code"){
                                                                    postalcode += results[0].address_components[i].long_name + ",";
                                                                    break;
                                                                }     
                                                            }
                                                        }
                                                      } else {
                                                        alert("Geocoder failed due to: " + status);
                                                      }
                                                });
                                                }
                                              });
                                              }
                                            </script>
                                            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3ljV5IX7n6GnGT-1nHbXpfVofyUs29lY&libraries=drawing&callback=initMap"
                                                 async defer></script>
                                        <div class="clearfix"> </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" onclick="savedeliverypath()" >Save</button>
                            <button type="button" class="btn btn-default" onclick="closemodel()">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   @include('users.admin.sidebar')
</div>
@endsection
@section('js')
    <script>
    function savedeliverypath(){
        $.ajax({
      type: "POST",
      url: "api/savedeliverypath",
      headers: { 'Authorization' : 'Bearer '+window.localStorage['token'] },
        data: { 
            'path_name': document.getElementById('path_name').value, 
            'latlong': polygonpoints,
            'postalcode': postalcode
        },
      success: function(data){
        $("#addpath").modal('hide');
        window.location.reload();
      },
      error: function(error){
        
      }
    });
    }
    function closemodel(){
      $("#addpath").modal('hide');
        window.location.reload();
    }
    </script>  
    <script src="{{ asset('js/angular_controllers/admincontroller.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('css/table-style.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/basictable.css') }}" />
    <script type="text/javascript" src="{{ asset('js/jquery.basictable.min.js') }}"></script>
	<script src="{{ asset('bower_components/ng-file-upload/ng-file-upload.js')}}"></script>  
	<script src="{{ asset('js/angular_library/ng-file-upload-shim.min.js') }}"></script>
    <script src="{{ asset('js/angular_library/ng-file-upload.min.js') }}"></script>
    <script src="{{ asset('js/angular_library/ng-file-upload-all.min.js') }}"></script>
@endsection