@extends('layouts.app')

@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')
<!-- Small boxes (Stat box) -->
<div class="row">
  <form role="form" action="/visits" method="POST">
    {{ csrf_field() }}

    <div class="col-lg-6 col-xs-12">
        <!-- general form elements -->
          <div class="box box-primary">
            <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 }} ({{ $contact->phone_number }}), {{ $contact->address }}</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->contact->name }} ({{ $ticket->node->device_id }}) {{ $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>
          </div>
          <!-- /.box -->
    </div>

  </form>
</div>
<!-- /.row -->
@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