@extends('modules.head') @section('contenido')
<div id="floating-panel">
  <select id="delivery" onchange="findDelivery()">
    <option value="">-- Mensajero --</option>
    @foreach ($deliveries as $d)
    <option value="{{$d->id}}">{{ $d->first_name . " " . $d->last_name . " | " . $d->document }}</option>
    @endforeach
  </select>
</div>

<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;">
  {!! Mapper::render() !!}
</div>

@endsection
@include('users.modalOrdersDelivery')
@section('extra-css')
<style>
  #floating-panel {
    position: absolute;
    top: 50px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
  }
</style>
@endsection

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/jquery.easing.1.3.js') }}"></script>

<script type="text/javascript">
  $(document).ready(function(){
    window.pusher = new Pusher('e20a83259236a3205d70', {
      cluster: 'us2',
      encrypted: true,
      authEndpoint: '/pusher/auth',
      auth: {
        headers: {
          'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
        }
      }
    });  
  });
  
  
  arrayDeliveryMan = [];
  
  function findDelivery(evt){
    var idMensajero = $('#delivery option:selected').val();
    
    if(arrayDeliveryMan[idMensajero]){
      window._map.setCenter(arrayDeliveryMan[idMensajero].marker.getPosition());
      window._map.setZoom(16);
    }
  }
  
  function getInProcessOrders(id){
    $.ajax({
      url: `/orders/deliveryProcess/${id}`,
      type: "GET",
      contentType: 'application/json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Content-Type': 'application/json'
      },
      success: function (r) {
        // Abrir modal y linkear.
        openModal(r.pending);
        
      },
      error: function (e) {}
    });
    
  }
  
  function openModal(data){
    $("#ordersDeliveryTable").dataTable().fnDestroy();
    $("#tbody-deliveryOrders").empty();
    $("#modal_ordersDeliver").modal();
    
    for(var i = 0; i < data.length; i++){
      tr =`<tr><td><a target="_blank" href="/orders/edit/${data[i].id}">${data[i].code}</a></td><td>${data[i].order_state.name}</td></tr>`;
        $("#tbody-deliveryOrders").append(tr);
      }
      
      reloadModalTable();
    }
    
    
    
    function reloadModalTable(){
      $('#ordersDeliveryTable').DataTable({
        'paging'      : true,
        'lengthChange': true,
        'searching'   : true,
        'ordering'    : true,
        'info'        : true,
        'autoWidth'   : true,
        language: {
          url: window.DATATABLES_LANGUAGE_URL,
        },
        
      });
    }
    
    function initTrackMap(map) {
      setTimeout(function(){
        window._map = map;
        @if(Auth::user()->rol_id == 1)
        getAllSucursales(true);
        @else
        getAllSucursales(false);
        // Solo se subscribe a su sucursal.
        window['private-positions-channel'] = window['pusher'].subscribe('private-positions-channel');
        window['private-positions-channel'].bind('pusher:subscription_succeeded', function () {
          window['private-positions-channel'].bind('client-position-' + {{Auth::user()->userInfo->sucursal_id}}, function (data) {
            addMarker(data.objMensajero);
            console.log(data.objMensajero);
          });    
        });
        @endif
        
        // Se realiza un llamado a todos los deliveries para que envien su posición actual.
        requestPositionsDeliveries();
      }, 1000);
    }
    
    function requestPositionsDeliveries(){
      $.ajax({
        url: "/pusher/request/positions",
        type: "GET",
        contentType: 'application/json',
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
          'Content-Type': 'application/json'
        },
        success: function (r) {},
        error: function (e) {}
      });
    }
    
    // Obtiene todas las sucursales del sistema.
    // @param: subscribeAll: Si es true el mapa se subscribe a todoas las posiciones enviadas por todas las sucursales ; caso contrario solo ve las de su propia sucursal.
    function getAllSucursales(subscribeAll) {
      $.ajax({
        url: "/sucursals/getAll",
        type: "GET",
        contentType: 'application/json',
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
          'Content-Type': 'application/json'
        },
        success: function (r) {
          for (var i = 0; i < r.s.length; i++) {
            paintMarkerSucursal(r.s[i]);
            if(subscribeAll){
              subscribeNewSucursal(r.s[i].id);
            }
          }
        },
        error: function (e) {
          console.log(e);
        }
      });
    }
    
    // Realiza la subscription al pusher de la sucursal con el ID indicado.
    function subscribeNewSucursal(id) {
      if(!window['private-positions-channel']){
        window['private-positions-channel'] = window['pusher'].subscribe('private-positions-channel');
      }
      
      window['private-positions-channel'].bind('pusher:subscription_succeeded', function () {
        window['private-positions-channel'].bind('client-position-' + id, function (data) {
          addDeliveryMarker(data);
          console.log("Channel:", id, "OBJ:", data);
        });
      });
    }
    
    // Pinta un marcado de sucursal, con la información indicada en el objeto
    function paintMarkerSucursal(obj) {
      if (!obj)
      return;
      
      var myLatlng = new google.maps.LatLng(obj.address.lat, obj.address.long);
      var m = new google.maps.Marker({
        position: myLatlng,
        map: window._map,
        icon: {
          url: 'img/marker-sucursal.png',
          size: new google.maps.Size(50, 50),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(50, 50),
        },
      });
      
      var contenido = `
      <div>
        <div id="siteNotice">
        </div>
        <h4 id="firstHeading" class="firstHeading">${obj.name}</h4>
        <div id="bodyContent">
          <p><b>Dirección:</b>${obj.address.direction}</p>
          <p><b>Teléfono:</b>${obj.phone}</p>
        </div>
      </div>`;
      
      var infowindow = new google.maps.InfoWindow({
        content: contenido
      });
      infowindow.setContent(contenido);
      
      m.addListener('click', function () {
        infowindow.open(window._map, m);
      });
      
    }
    
    
    function addDeliveryMarker(messagePusher){
      if (!messagePusher)
      return;
      
      messagePusher = messagePusher.obj;
      var user_id = messagePusher.user_id;
      var position = new google.maps.LatLng(messagePusher.lat, messagePusher.lng);
      
      if(arrayDeliveryMan[user_id]){ // Si ya existe en el mapa.
        var marker = arrayDeliveryMan[user_id].marker;
        var infowindow = arrayDeliveryMan[user_id].infowindow;
        marker.setPosition(position);
      }
      else{ // Se debe crear marker
        var content = 
        `<div>
          <h2>${messagePusher.nombre}</h2>
          <div>
            <p><a href="#" onclick='getInProcessOrders(${user_id})'>Ver pedidos</a></p>
          </div>
        </div>`;
        
        
        var infowindow = new google.maps.InfoWindow({
          content: content
        });
        
        var marker = new google.maps.Marker({
          position: position,
          icon: 'img/marker-deliver.png',
          map: window._map
        });
        
        marker.addListener('click', function () {
          infowindow.open(window._map, marker);
        });
        
        arrayDeliveryMan.push({
          marker: marker,
          infowindow: infowindow
        });
      }
    }
    
  </script>