{{-- New table form --}}

@extends('layouts.app')

@section('content')
  <form method="POST" action="{{route('table.storeNew')}}" class="row justify-content-center"
        aria-label="New Table">

    @csrf
    <div class="col-md-10">
      @php(Widget::setLayout(3, 7))

      {!! Widget::header(1, 'New Table') !!}

      {!! Widget::text('title', 'Title')->autoAlias('name', '-')
            ->help('Unique among your tables') !!}

      {!! Widget::text('name', 'Name')->value('')->prepend(user()->handle.' /')
            ->help('Unique among your tables, and part of the URL; only letters, digits and
                    some symbols are allowed.') !!}

      {!! Widget::textarea('description', 'Description')->height('8em')
            ->help('Description of the table. URLs in a full format will be clickable.') !!}

      {!! Widget::text('license', 'License')
            ->help('License applicable to the table\'s data, if any. By default, all
              tables are CC0 or Public Domain.') !!}

      {!! Widget::text('origin', 'Adapted from')
            ->help('If you took the data from some external site, a book, etc., write it here.
               URLs in a full format will be clickable.') !!}

      <div class="row form-group">
        <label for="field-columns" class="col-md-3 col-form-label text-md-right">
          Columns
        </label>
        <div class="col-md-8">
          <div id="column-editor"></div>

          <noscript>
            You have JavaScript disabled; enter columns as JSON array<br>
            <textarea class="form-control" name="columns" rows="10">{{ old('columns', toJSON($columns)) }}</textarea>
          </noscript>

          @if ($errors->has('columns'))
            <span class="invalid-feedback" role="alert">
              <strong>{{ $errors->first('columns') }}</strong>
            </span>
          @endif

          @if($errors->has('columns'))
            <span class="text-danger">
              @icon(fa-warning, sr:Validation error:)
              {{$errors->first('columns')}}
            </span>
          @endif
        </div>
      </div>

      {!! Widget::textarea('data', 'Initial data')->value($exampleData)->height('12em')
            ->help('
              Initial table data in CSV format, columns corresponding to the
              specification you entered above. This is optional; you can fill the table
              later, e.g. by uploading a CSV file.') !!}

      <div class="row form-group">
        <div class="col-md-7 offset-md-3">
          <button type="submit" class="btn btn-primary">
            @icon(fa-save fa-pr)Create Table
          </button>
        </div>
      </div>
    </div>
  </form>
@endsection

@push('scripts')
  <script>
    ready(function() {
      app.ColumnEditor('#column-editor', {
        name: 'columns',
        xColumns: {!! old('columns', toJSON($columns)) !!},
        newTable: true,
        //sortable: false,
      })
    });
  </script>
@endpush