<!--suppress JSAnnotator -->
<template>
  <div class="page" data-name="create-task">
    {{#unless isHideCloseBtn}}
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left"></div>
        <div class="title">
          {{@global.LANGUAGE.TASK_PANEL_MSG10 }}
        </div>
        <div class="right">
           
          {{#unless isHideCloseBtn}}
          <a href="#" class="link popup-close" data-popup=".popup-fullscreen-createtask">
            <i class="f7-icons">close</i>
          </a>
          {{/unless}}
        </div>
      </div>
    </div>
    {{/unless}}





    <div class="page-content bg-color-lightgray  ">



      <div class="content-wrapper with-sidebar  sidebar-opened ">


        <form name="TaskEditForm" class="page-content no-padding content-sidebar left">
          <div class="bottom-section-wrapper   bottom-section-button-wrapper bg-color-white">
            <div class="row">
              <label for="submit-form-new-task" class="col button button-fill color-green elevation-2"
                tabindex="0">{{@global.LANGUAGE.TASK_PANEL_MSG06}}</label>
            </div>
          </div>


          <input type="submit" id="submit-form-new-task" class="display-none" />
          <div class="list no-margin no-hairlines ">
            <ul>
              <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"><i class="f7-icons icon-header-reports "></i></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.TASK_PANEL_MSG01 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.TASK_PANEL_MSG01 }}" name="TaskName"
                      value="{{TaskName}}" maxlength="200" required validate>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-header-reports"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="GeofenceInput">
                        {{#GeofenceList}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          None Selected</option>
                        {{/GeofenceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> Created tasks
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="overflow-visible">
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-address"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label">{{@global.LANGUAGE.GEOFENCES_MSG06}} <i
                        class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init"
                        data-tooltip="{{@global.LANGUAGE.PROMPT_MSG0103}}"></i></div>
                    <div class="item-input-wrap">
                      <textarea name="GeoAddress" placeholder="{{@global.LANGUAGE.GEOFENCES_MSG06}}" maxlength="400"
                        value="">{{Address}}</textarea>
                      <span class="input-search-button ">
                        <i class="f7-icons icon-search ripple text-color-red ripple-color-red"></i>
                      </span>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-admin-geofences"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="GeofenceInput">
                        {{#GeofenceList}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/GeofenceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REPORT_PANEL_MSG205}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content item-input startDateTimeWrapper" data-input-name="StartDateTime">
                    <div class="item-media text-color-lightgray">
                        <i class="f7-icons icon-calendar"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.ASSET_PLAYBACK_MSG02}}</div>
                        <div class="item-input-wrap">
                            <input type="text" name="StartDateTime" class="StartDateTime" placeholder="{{@global.LANGUAGE.ASSET_PLAYBACK_MSG02}}" value="{{StartDateTime}}" maxlength="200" readonly>
                        </div>
                    </div>
                </div>
            </li>
            <li>
              <div class="item-content item-input">
                <div class="item-media text-color-lightgray">
                  <i class="f7-icons icon-calendar"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title item-label"></div>
                  <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                    data-close-on-select="true">
                    <select name="TimePeriodInput">
                      {{#TimePeriodList}}
                      <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                        {{Name}}</option>
                      {{/TimePeriodList}}
                    </select>
                    <div class="item-inner">
                      <div class="item-title item-label"> {{@global.LANGUAGE.TASK_PANEL_MSG02}}
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </li>
            <li class="item-content item-input ">
              <div class="item-media text-color-lightgray"><i class="f7-icons icon-header-reports "></i></div>
              <div class="item-inner">
                <div class="item-title item-label"> {{@global.LANGUAGE.TASK_PANEL_MSG03}}</div>
                <div class="item-input-wrap ">
                  <textarea name="Description" rows="10" placeholder="{{@global.LANGUAGE.TASK_PANEL_MSG03}}"
                    maxlength="400" value="">{{Description}}</textarea>
                </div>
              </div>
            </li>


              <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"><i class="f7-icons icon-overspeed "></i></div>
                <div class="item-inner">
                  <div class="item-title item-label"> Order  ID</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="Order ID" name="RoutNameInput"
                      value="{{RoutName}}" maxlength="200" required validate>
                  </div>
                </div>
              </li>



  
 
      

    


          

            </ul>
          </div>



        </form>






        <div class="content">
          <div id="checkpointMap" class="checkpoint-map">
          </div>
        </div>
      </div>


    </div>
  </div>


</template>

<script>
  // script must return component object
  return {
    data: function () {
      var self = this;
      var ret = {};
       




      var geofenceList = Protocol.Helper.getGeofenceList();
      var timePeriodList = Protocol.Helper.getTimePeriodList();
      var typeJobList = Protocol.Helper.getTypeJobList();

 
      ret.MapTrack = false;
      ret.GeofenceList = geofenceList;
      ret.TimePeriodList = timePeriodList;
      ret.TypeJobList = typeJobList;
      ret.DriverList = []

      return ret;
    },
    methods: {
      getContactList: function(MajorToken){
                var self = this;

                self.$app.request.post(API_URL.GET_CONTACT_USERS_LIST, {MajorToken}, function (result, xhr, status) {
                    self.$app.preloader.hide();
                  
                    if (result && result.length) {
                        self.$app.methods.setInStorage({name:'contactList', data:result });
                        var contactList = self.$app.methods.sortContactList(result);

                        self.$setState({
                          DriverList: contactList,
                            DataLoaded: true,
		                });
                    }

                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Get Contact List ');
                },
                'json');
            },


      showOnMap: function (data) {
        let self = this;

        if (data.IMEI && POSINFOASSETLIST && POSINFOASSETLIST[data.IMEI] && POSINFOASSETLIST[data.IMEI].markerIdDashboard) {
          var marker = self.AllMarkersGroup.getLayer(POSINFOASSETLIST[data.IMEI].markerIdDashboard);
          self.AllMarkersGroup.zoomToShowLayer(marker, function () {
            if (self.MapTrack.getZoom() < 15) {
              self.MapTrack.setView(marker.getLatLng(), 15)
            }
            marker.openPopup();
          });
        } else {
          self.$app.methods.customNotification({
            title: data.Name ? data.Name : data.IMEI,
            text: LANGUAGE.PROMPT_MSG031
          });
        }
      },


    },

    on: {
      pageInit: function (e, page) {
        let self = this;
        var startDateTimeWrapper = page.$el.find('.startDateTimeWrapper');


        var startDateTimeEl = page.$el.find('input[name="StartDateTime"]');
        self.getContactList(self.$app.data.MajorToken);


        console.log(self)
        let searchAddressButtonEl = page.$el.find('.input-search-button');
        var form = page.$el.find('[name = "ReportEditForm"]');

        self.MapTrack = Protocol.Helper.createMap({ target: 'checkpointMap', latLng: [38.530015, -101.649213], zoom: 4 });
        var startPicker = new MaterialDatetimePicker({
                el: startDateTimeEl[0],
                format: datepickerFormat,
                openedBy: 'click',
            });
            startDateTimeWrapper.on('click', function() {
                startPicker.open();
            });

        searchAddressButtonEl.on('click', function (e) {
          let $GeoAddress = $$(this).siblings('[name="GeoAddress"]');
          let GeoAddressVal = $GeoAddress.val();
          if (!GeoAddressVal || GeoAddressVal.length < 3 || GeoAddressVal === $GeoAddress.data('prev-val')) {
            return;
          }

          let $parent = $$($GeoAddress.parent());
          let resultContainer = $parent.find('.results');

          if (!resultContainer.length) {
            $parent.append('<div class="results find-address-results"></div>');
            resultContainer = $parent.find('.results');
          }

          $GeoAddress.data('prev-val', GeoAddressVal);
          self.$app.progressbar.show();
          MapProvider
            .search({ query: GeoAddressVal })
            .then(function (result) {
              self.$app.utils.nextFrame(() => { self.$app.progressbar.hide(); });

              if (!result.length) {
                self.$app.methods.customNotification({ text: LANGUAGE.PROMPT_MSG008 });
                return;
              }

              let template = '<ul>';
              for (let i = 0; i < result.length; i++) {
                template += `<li data-key="${i}">${result[i].label}</li>`;
              }
              template += '</ul>';
              resultContainer.html(template);
              if (!resultContainer.hasClass('show')) {
                resultContainer.addClass('show');
              }

              $(document).on('click.hideAddressesList', function (e) {
                if (!$$(e.target).closest('.results').length) {
                  resultContainer.removeClass('show');
                  $(document).off('.hideAddressesList');
                }
              });

              resultContainer.find('li').on('click', function (e) {
                $GeoAddress.val(result[e.target.dataset.key].label);
                resultContainer.removeClass('show');
                $(document).off('.hideAddressesList');

                // if (self.AddressMarker) {
                //   MapTrack.removeLayer(self.AddressMarker);
                // }
                // self.AddressMarker = L.marker([result[e.target.dataset.key].y, result[e.target.dataset.key].x], { icon: Protocol.MarkerIcon[9] });
                // self.AddressMarker.bindPopup(result[e.target.dataset.key].label, { maxWidth: self.$app.data.MaxMapPopupWidth, closeButton: false });
                // self.AddressMarker.addTo(MapTrack);


                L.Routing.control({
                  waypoints: [
                    L.latLng(result[+e.target.dataset.key].y, +result[e.target.dataset.key].x)
                    
                  ]
                }).addTo(self.MapTrack);

                
                self.MapTrack.fitBounds(result[e.target.dataset.key].bounds, { padding: [16, 16] });


        
              });
            }).catch(function () {
              self.$app.utils.nextFrame(() => { self.$app.progressbar.hide(); });
              self.$app.methods.customNotification({ text: LANGUAGE.COM_MSG36 });
            });
        });
        $$(form).on('submit', function (e) {
          e.preventDefault();

          var userInfo = self.$app.methods.getFromStorage('userInfo');
          var data = {


          };



          console.log(data);
          // self.saveUserDetails(data, otherData);

          return false;
        });



        // page.$el.on('click', '.showOnMap', function (e) {
        //   let imei = $$(this).data('imei')
        //   let name = $$(this).data('name')
        //   self.showOnMap({ IMEI: imei, Name: name })
        // });





      },
      pageAfterIn: function () {
        var self = this;


      },
      pageAfterOut: function () {
        // page has left the view

      },
      pageBeforeRemove: function () {
        //console.log('here');
      }

    }
  };
</script>