@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.city.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/'.$tutorial->id) }}">
                @csrf
                @method('PUT')
                <div class="form-group row">
                    <label for="owner_id" class="col-2 col-form-label text-right">所属货主</label>
                    <div class="col-8">
                        <select name="owner_id" class="form-control @error('owner_id') is-invalid @enderror" style="width: 50%">
                            <option v-for="owner in owners" selected v-if="tutorial.owner_id==owner.id" :value="owner.id">@{{ owner.name }}</option>
                            <option v-for="owner in owners" v-if="tutorial.owner_id!=owner.id" :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="tutorial.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($tutorial, 'content')
    </div>
@endsection

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