@extends('layouts.app')
@section('title')编辑-商品@endsection

@section('content')
    <div class="container-fluid" id="list">
        <div class="card">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}！</div>
                @endif
                <form method="POST" action='{{url("maintenance/commodity/{$commodity->id}")}}'>
                    @csrf
                    @method('PUT')
                    <div class="form-group row">
                        <label for="owner_name" class="col-2 col-form-label text-right">货主名</label>
                        <div class="col-9 form-inline">
                            <select class="form-control form-control-sm col-6 @error('owner_id') is-invalid @enderror"
                                    name="owner_id" v-model="owner_id">
                                <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                            </select>
                            <input placeholder="搜索货主" @input="seekOwner($event)" class="form-control form-control-sm col-3">
                            @error('owner_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="sku" class="col-2 col-form-label text-right">SKU</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('sku') is-invalid @enderror"
                                   name="sku" autocomplete="off" value="@if(old('sku')){{old('sku')}}@else{{$commodity->sku}}@endif" >
                            @error('sku')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </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="@if(old('name')){{old('name')}}@else{{$commodity->name}}@endif" required>
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="barcode" class="col-2 col-form-label text-right">条码</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('barcode') is-invalid @enderror"
                                   name="barcode" autocomplete="off" value="@if(old('barcode')){{old('barcode')}}@else{{$commodity->barcode}}@endif" required>
                            @error('barcode')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-outline-dark form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
    <script>
        new Vue({
            el: "#list",
            data: {
                owners: {!! $owners !!},
                owner_id: '',
                commodity:{!! $commodity !!},
            },
            mounted(){
              if (this.commodity.owner_id) this.owner_id=this.commodity.owner_id;
            },
            methods: {
                seekOwner(e) {
                    this.owners.some(owner => {
                        if (owner.name.indexOf(e.target.value) !== -1) {
                            this.owner_id = owner.id;
                            return true;
                        }
                    });
                }
            }
        });
    </script>
@endsection