@extends('layouts.app')
@section('title')创建教程@endsection
@section('head')
    <link rel="stylesheet" type="text/css" href="{{asset('css/trix.css')}}">
    <script type="text/javascript" src="{{asset('js/trix.js')}}"></script>
@endsection
@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.tutorial.menu')@endcomponent
    </div>
        <div class="card col-md-8 offset-md-2" id="tutorial">
            <div class="card-body">
                <form method="POST" action="{{ url('maintenance/tutorial') }}">
                    @csrf
                    <div class="form-group row">
                        <label for="owner_id" class="col-2 col-form-label text-right">所属货主</label>
                        <div class="col-8">
                            <select @if(isset($owner_id)) v-model="owner_id" @endif name="owner_id" class="form-control @error('owner_id') is-invalid @enderror" style="width: 50%">
                                <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-2 col-form-label text-right">标题</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                   name="name" autocomplete="off" value="{{ old('name') }}" required>
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div id="for-trix"></div>
                    <div class="form-group row">
                        <label for="initial_weight" class="col-2 col-form-label text-right">内容</label>
                        <div class="col-8" id="content"></div>
                    </div>
                    <div class="form-group row">
                        <label for="type" class="col-2 col-form-label text-right">类型</label>
                        <div class="col-8">
                            <select name="type" class="form-control" style="width: 50%;">
                                <option value="二次加工">二次加工</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-success form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="trix">
        @trix(\App\Tutorial::class, 'content')
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#tutorial",
            data:{
                owners:[
                    @foreach($owners as $owner)
                    {!! $owner !!},
                    @endforeach
                ],
                @if(isset($owner_id)) owner_id:'{{$owner_id}}', @endif
            },
            mounted() {
              let trix=$("#trix");
              $("#content").append(trix);
            },
        });
    </script>
@endsection