@extends('layout.administrator.index')
@section('title', 'Domicilios')

@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      <h1>Domicilios</h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('administrator.dashboard')}}"><i class="fa fa-dashboard"></i> Inicio</a></li>
        <li class="breadcrumb-item"><a href="{{route('administrator.delivery.index')}}">Domicilios</a></li>
        <li class="breadcrumb-item active">Detalle</li>
      </ol>
    </section>

    <section class="content">
      <div class="row">
        <div class="col-md-8">
          <div class="box boxContentMap">
            <div class="box-header with-border bg-admin">
              <div class="row align-items-center">
                <div class="col-12">
                  <h4 class="box-title">#{{$delivery->reference}}</h4>
                </div>
              </div>
            </div>
            <div class="box-body mapContent">
              <div id="map">

              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box">
            <div class="box-body">
              <div class="row">
                <div class="col-md-12 text-center">
                  {{-- @if ($details->photo != null)
                    @if (file_exists( public_path().'/assets/images/domiciliary/' . $details->photo))
                      <img class="imgPhotoShowDomiciliary" src="{{asset('assets/images/domiciliary')}}/{{$details->photo}}" alt="Foto">
                    @else
                      <img class="imgPhotoShowDomiciliary" src="{{asset('assets/images/domiciliary/notImage.jpg')}}" alt="Logo">
                    @endif
                  @else
                    <img class="imgPhotoShowDomiciliary" src="{{asset('assets/images/domiciliary/notImage.jpg')}}" alt="Logo">
                  @endif --}}
                </div>
              </div>
            </div>
          </div>
          <div class="box box-widget widget-user-2 showDomiciliaryList boxContentMap">
            <div class="bg-admin">
              <h5 class="">Estados</h5>
            </div>
            <div class="box-footer no-padding">
              <ul class="nav d-block nav-stacked">
                @foreach (Config::get('const.delivery_states') as $stateData)
                  <li class="nav-item">
                    <a href="#" class="nav-link">
                      <b class="text-dark">{{$stateData}}</b>
                      <span class="pull-right badge bg-dark">--:--</span>
                    </a>
                  </li>
                @endforeach
                {{-- <li class="nav-item">
                  <a href="#" class="nav-link">
                    <b class="text-success">15/05/2020 01:23 AM</b>
                    <span class="pull-right badge bg-success">$ {{number_format(10000, 0,',','.')}}</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    <b class="text-success">15/05/2020 01:23 AM</b>
                    <span class="pull-right badge bg-success">$ {{number_format(10000, 0,',','.')}}</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    <b class="text-success">15/05/2020 01:23 AM</b>
                    <span class="pull-right badge bg-success">$ {{number_format(10000, 0,',','.')}}</span>
                  </a>
                </li> --}}
                {{-- <li class="nav-item">
                  <a href="#" class="nav-link text-center">
                    <b class="text-default"><i class="fa fa-frown-o"></i> Aun no tienes liquidaciones</b>
                  </a>
                </li> --}}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
@endsection

@section('js')
  <script type="text/javascript">
    $( document ).ready(function() {
      initializeMap();
    });

    function initializeMap() {
      directionsService = new google.maps.DirectionsService;
      directionsRenderer = new google.maps.DirectionsRenderer;
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: {
          lat: 10.9834223,
          lng: -74.8179932
        }
      });

      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var position = new google.maps.LatLng(10.9834223, -74.8179932);
      var mapOptions = {
        zoom: 14,
        center: position
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);

      directionsRenderer.setMap(map);
      @foreach($addresses as $address)
        var marker = new google.maps.Marker({
          label: '{{$loop->iteration}}',
          position: {
            lat: '{{$address->lat}}',
            lng: '{{$address->long}}'
          },
          title: '{{$address->address}}'
        });
        marker.setMap(map);
      @endforeach
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA01EIKVqGmy9BAhcDyT-nsJsLtBUbU_gA"></script>
@endsection