@extends('layouts.admin')

@section('title')
    New Visit
@endsection

@section('description')
    Create a new visit
@endsection

@section('breadcrumb')
    <li class="active"><a href="/tickets">All Visits</a></li>
    <li><a href="#">New Visit</a></li>
@endsection

@section('styles')
<style>
.table-borderless td,
.table-borderless th {
    border: 0;
}
</style>
@endsection

@section('content')
<div class="card">
  <div class="card-body">
    <form role="form" action="/admin/visits" method="POST">
      {{ csrf_field() }}
      <div class="box-header with-border">
        <h3 class="box-title">Create A New Visit</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
        <div class="box-body">
  
          <div class="callout callout-info">
              <h4>Name: {{ auth()->user()->name }}</h4>
              <h5>Date: {{ date('d F Y') }}</h5>
          </div>
  
          <div class="form-group">
            <label for="name">Visit Type</label>
            <select class="form-control" id="type" name="type">
              <option value="installation" selected>Installation</option>
              <option value="maintenance">Maintenance</option>
              <option value="dismantle" selected>Dismantle</option>
              <option value="survey">Survey</option>
            </select>
          </div>
  
          <div class="form-group">
            <label for="name">Contact ID</label>
            <select class="form-control select2" id="contact_id" name="contact_id">
            @foreach($contacts as $contact)
              <option value="{{ $contact->id }}">{{ $contact->name }}</option>
            @endforeach
            </select>
            <!-- <input type="text" class="form-control" id="device_id" name="device_id" placeholder="Enter device id"> -->
          </div>
  
          <div class="form-group">
            <label for="name">Related Ticket</label>
            <select class="form-control select2" id="ticket_id" name="ticket_id">
                @foreach($tickets as $ticket)
                <option value="{{ $ticket->id }}">({{ $ticket->node->name }}) {{ $ticket->ticket_id }} - {{ $ticket->title }}</option>
                @endforeach
            </select>
          </div>
  
          <div class="form-group">
            <label for="name">Comment</label>
            <textarea type="text" class="form-control" id="comment" name="comment" placeholder="Enter comment" rows="5"></textarea>
          </div>
  
          <div class="form-group">
            <label for="name">Coordinate</label>
          </div>
  
          <button class="btn btn-success"  type="button" onclick="getLocation()">Get Coordinate</button>
          &nbsp;&nbsp;<span id="coordinate">Click the button to get coordinate</span>
          <input hidden type="hidden" class="form-control" id="latitude" name="latitude" placeholder="Please click Get Coordinate button" />
          <input hidden type="hidden" class="form-control" id="longitude" name="longitude" placeholder="Please click Get Coordinate button" />
  
          <div class="form-group">
            <div id="mapid" style="height: 250px; margin-top:10px; background-color: lightgrey"></div>
          </div>
  
        <!-- /.box-body -->
        </div>
  
        <div class="box-footer">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
  </div>
</div>
@endsection

@section('scripts')
<link rel="stylesheet" href="/plugins/leaflet/leaflet.css"/>
<script src="/plugins/leaflet/leaflet.js"></script>

<script>
    var latitude = document.getElementById("latitude");
    var longitude = document.getElementById("longitude");
    var coordinate = document.getElementById("coordinate");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.value = "Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position) {
        latitude.value = position.coords.latitude;
        longitude.value = position.coords.longitude;
        coordinate.innerHTML = position.coords.latitude + ' , ' + position.coords.longitude;

        var greenIcon = new L.Icon({
        iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
        });

        // var map = L.map('mapid').setView([-6.899525, 107.653151], 5);
        var map = L.map('mapid').setView([position.coords.latitude, position.coords.longitude], 14);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '',
            maxZoom: 18,
            id: 'yansyaf.39f967db',
            accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjajMzc2w5YWcwMDFiMnBydWE2OXVnNTk1In0.see89ybj5A_I88xDKpY7Pw'
        }).addTo(map);

        var marker = L.marker([position.coords.latitude, position.coords.longitude]).addTo(map);
        marker.setIcon(greenIcon);
    }
</script>
@endsection