@extends('layouts.master')

@section('content')

@include('partials/logged-in')

<div class="dashboard">

  <br>
  <h2>Database: {{ $database->name }}</h2>

  <form class="ui form">
    <div class="field">
      <label>Read Token</label>
      <input readonly="" value="{{ $database->read_token }}">
    </div>

    @if ($database->created_by == session('user_id'))
    <div class="field">
      <label>Write Token <a href="#" class="show-api-endpoint">(show API endpoint)</a></label>
      <input readonly="" value="{{ $database->write_token }}">
    </div>

    <div class="api-endpoint field hidden">
      <label>API Endpoint</label>
      <input type="text" readonly value="{{ env('BASE_URL') }}api/input?token={{ $database->write_token }}">
    </div>
    @endif
  </form>

  <div style="margin-top: 20px;">
    <h3>Users with Access</h3>

    <ul class="users">
      @foreach($users as $user)
      <li class="user">
        @if($user->id != session('user_id'))
          <a href="#" data-user="{{ $user->url }}" class="remove-user hidden">&times;</a>
        @endif
        {{ $user->url }}
      </li>
      @endforeach
      <li>
        <a href="javascript:$('.users .create').removeClass('hidden');$('.create-link').addClass('hidden');" class="pure-button create-link {{ session('create-error') ? 'hidden' : '' }}">New User</a>
        @if(session('create-error'))
          <div class="error">{{ session('create-error') }}</div>
        @endif
        <span class="create {{ session('create-error') ? '' : 'hidden' }}">
          <form action="/settings/{{ $database->name }}" method="post" class="ui form">
            <div class="ui action input">
              <input type="url" name="add_user" value="{{ session('add-user-url') }}" placeholder="github or indieauth url">
              <button type="submit" class="ui button primary">Add User</button>
            </div>
          </form>
        </span>
      </li>
    </ul>

  </div>

  <br>

  <h2>Settings</h2>

  <p>Here you can pick a default timezone and system of measurement to display this database in.</p>

  <div class="panel">
    <form action="/settings/{{ $database->name }}" method="post" class="ui form">
      <div class="field">
        <label for="timezone">Timezone</label>
        <input name="timezone" type="text" class="pure-input-1" value="{{ $database->timezone }}">
      </div>

      <div class="field">
	<label for="metric">System</label>
	<select name="metric" class="pure-input-1">
	  <option value="0" {{ $database->metric ? '' : 'selected' }}>Imperial (miles)</option>
          <option value="1" {{ $database->metric ? 'selected' : '' }}>Metric (kilometer)</option>
        </select>
      </div>

      <button type="submit" class="ui button primary">Save</button>
    </form>
  </div>
  <br>

  <h2>Micropub Trip Export</h2>

  <div class="panel">
    @if (empty($database->micropub_token))
    <p>Authorize Compass with a Micropub endpoint and any trips that are written to this database will be sent to that endpoint as well.</p>
    <form action="/settings/{{ $database->name }}/auth/start" method="post" class="ui form">
      <div class="field">
        <label for="micropub_endpoint">web sign-in</label>
        <input name="me" type="url" placeholder="https://example.com/" class="pure-input-1" value="">
      </div>

      <button type="submit" class="ui button primary">Connect</button>
    </form>
    @else
      <form action="/settings/{{ $database->name }}/auth/remove" method="get" class="ui form">
        <div class="field">
          <p>You are currently posting to <strong>{{$database->micropub_endpoint}}</strong>. Any trips that are written to this database will be sent to that endpoint as well.</p>
        </div>

        <button type="submit" class="ui button primary">Disconnect</button>
      </form>
    @endif
  </div>

  <br>

  <h2>Web Hooks</h2>

  <p>Enter one or more URLs to ping when events occur. This will send a POST request to each URL configured when new a location is received, or a trip is started or ended.</p>

  <p>The POST body will be JSON encoded and will contain either a top-level property <code>location</code> or <code>trip</code>. If the trip has started, then the trip object will contain a <code>current_location</code> property. If the trip has ended, the trip object will contain a <code>end_location</code> property.</p>

  <p>Enter one or more URLs separated by whitespace.</p>

  <div class="panel">
    <form action="/settings/{{ $database->name }}" method="post" class="ui form">
      <div class="field">
        <label for="ping_urls">Ping URLs</label>
        <textarea name="ping_urls" class="pure-input-1">{{ $database->ping_urls }}</textarea>
      </div>

      <button type="submit" class="ui button primary">Save</button>
    </form>
  </div>

  <br>

</div>
<script>
jQuery(function($){
  $(".users .user").hover(function(){
    $(this).children(".remove-user").removeClass("hidden");
  }, function(){
    $(this).children(".remove-user").addClass("hidden");
  });
  $(".remove-user").click(function(){
    $.post("/settings/{{ $database->name }}", {
      database: "{{ $database->name }}",
      remove_user: $(this).data('user')
    }, function(data){
      window.location = window.location;
    });
    return false;
  });
  $(".show-api-endpoint").click(function(){
    $(".api-endpoint").removeClass("hidden");
    $(".show-api-endpoint").addClass("hidden");
  });
});
</script>
@endsection