@extends('layouts.app')

@section('content')
<div class="container">
   <style>
      i.fa { color: white; }
      [v-cloak] { display:none; }
   </style>
   <a href="/tilepieces" class="btn btn-primary"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>&nbsp;Back to Tilepieces</a>
   <div class="col-12 offset-sm-1 col-sm-10 offset-md-2 col-md-8 mt-2">
      {!! Form::open(['action' => ['TilepiecesController@store'], 'class' => '']) !!}
      <div class="form-group row">
         {{ Form::label('Device', null, ['class' => 'col-12 col-sm-3 col-form-label']) }}
         <div class="col-12 col-sm-9">
            {!! Form::select('devices', $deviceList, null, ['id' => 'devices', 'class' => 'form-control', 'placeholder' => 'Pick a BACNET device...', 'onchange' => 'getObjects()']) !!}
         </div>
      </div>
      <div class="form-group row">
         {{ Form::label('Object', null, ['class' => 'col-12 col-sm-3 col-form-label']) }}
         <div class="col-12 col-sm-9">
            {!! Form::select('object_shorthand', [], null, ['id' => 'object_shorthand', 'class' => 'form-control', 'placeholder' => 'Pick an object...']) !!}
         </div>
      </div>
      <div class="form-group row">
         {{ Form::label('Tiles', null, ['class' => 'col-12 col-sm-3 col-form-label']) }}
         <div class="col-12 col-sm-9">
            {!! Form::select('tile_slug', $tiles, $selectedTileSlug ?? null, ['class' => 'form-control', 'placeholder' => 'Pick a tile...']) !!}
         </div>
      </div>
      <div class="form-group row">
         {{ Form::label('Short Name', null, ['class' => 'col-12 col-sm-3 col-form-label']) }}
         <div class="col-12 col-sm-9">
            {!! Form::text('short_name', null, ['class' => 'form-control', 'v-model' => 'formName']) !!}
         </div>
      </div>
      <div class="form-group row">
         {{ Form::label('Position', null, ['class' => 'col-12 col-sm-3 col-form-label']) }}
         <div class="col-12 col-sm-9">
            {!! Form::text('position', null, ['class' => 'form-control']) !!}
         </div>
      </div>
      <div class="form-group row">
         {{ Form::label('Long Name', null, ['class' => 'col-12 col-sm-3 col-form-label']) }}
         <div class="col-12 col-sm-9">
            {!! Form::text('long_name', null, ['class' => 'form-control', 'v-model' => 'formName']) !!}
         </div>
      </div>
      <div class="form-group row">
         {{ Form::label('Order', null, ['class' => 'col-12 col-sm-3 col-form-label']) }}
         <div class="col-12 col-sm-9">
            {!! Form::text('order', null, ['class' => 'form-control']) !!}
         </div>
      </div>
      <div class="form-group row">
         {{ Form::label('Control', null, ['class' => 'col-12 col-sm-3 col-form-label']) }}
         <div class="col-12 col-sm-9">
            {!! Form::select('control', config('optimize.control_types'), null, ['class' => 'form-control', 'placeholder' => 'User Settable by...']) !!}
         </div>
      </div>
      <div class="form-group row">
         <div class="col-12 offset-sm-3 col-sm-9">
            {!! Form::submit('Create Tilepiece', ['class' => 'btn btn-primary']) !!}
         </div>
      </div>
      {!! Form::close() !!}
   </div>
   @include('layouts.errors')
</div>
@endsection

@section('afterjs')
<script>
    function getObjects() {
        var deviceInstance = String($('#devices').find(":selected").val());
        $.getJSON("/deviceObjects/" + deviceInstance, null, function (data) {
            $("#object_shorthand option").remove();
            $.each(data, function (index, item) {
                $("#object_shorthand").append(
                    $("<option></option>")
                        .text(item.list_name)
                        .val(item.shorthand)
                );
            });
        });
    }
    $("select").css('width', '100%').select2();
</script>
{{--@include('tilepieces.vue')--}}
@append