@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('waybill.menu')@endcomponent
        <div class="container-fluid">
            <div class="card menu-third" style="background: #f9f0f0;transform: scale(0.95)">
                <ul class="nav nav-pills">
                    @can('运输管理-录入')
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('waybill/create/ZX')}}" :class="{active:isActive('ZX',3)}">专线</a>
                        </li> @endcan
                    @can('运输管理-录入')
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('waybill/create/ZF')}}" :class="{active:isActive('ZF',3)}">直发车</a>
                        </li> @endcan
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid mt-3" id="list">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <form method="POST" action="{{ url('waybill') }}">
                    @csrf
                    <input name="type" hidden value="{{$type}}">
                    <div class="h5 text-center mb-3">@if($type=='专线')专线@else 直发车@endif </div>
                    <div class="form-group row">
                        <label for="owner_id" class="col-2 col-form-label text-right text-primary">货主{{old('owner_id')}} *</label>
                        <div class="col-8 form-inline">
                            <select name="owner_id" class="form-control @error('owner_id') is-invalid @enderror" v-model="owner_id"  style="width: 30%">
                                <option v-for="owner in owners" :value="owner.id">@{{owner.name}}</option>
                            </select>
                            <input class="form-control-sm ml-2" placeholder="输入关键字定位" @input="owner_seek">
                        </div>
                        <div class="col-sm-5">
                            <p class="form-control-static text-danger small font-weight-bold" style="margin-left: 50%">{{ $errors->first('owner_id') }}</p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="wms_bill_number" class="col-2 col-form-label text-right text-muted">WMS单号</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('wms_bill_number') is-invalid @enderror"
                                   name="wms_bill_number" autocomplete="off" value="{{ old('wms_bill_number') }}"  >
                            @error('wms_bill_number')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-8" style="margin-left: 15%">
                        <button class="btn btn-outline-primary btn-sm" @click="origination='上海市松江区泗砖路351号宝时松江仓'" style="transform: scale(0.9)">松江仓库</button>
                        <button class="btn btn-outline-primary btn-sm" @click="origination='上海市嘉定区武乡路9号宝时嘉定仓'" style="transform: scale(0.9)">嘉定仓库</button>
                    </div>
                    <div class="form-group row">
                        <label for="origination" class="col-2 col-form-label text-right text-primary">始发地址 *</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('origination') is-invalid @enderror"
                                   name="origination" autocomplete="off" value="{{ old('origination') }}"  v-model="origination" required>
                            @error('origination')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="destination" class="col-2 col-form-label text-right text-primary">目的地址 *</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('destination') is-invalid @enderror"
                                   name="destination" autocomplete="off" value="{{ old('destination') }}"  required>
                            @error('destination')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="recipient" class="col-2 col-form-label text-right text-primary">收件人 *</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('recipient') is-invalid @enderror"
                                   name="recipient" autocomplete="off" value="{{ old('recipient') }}"  required>
                            @error('recipient')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="recipient_mobile" class="col-2 col-form-label text-right text-primary">收件人电话 *</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('recipient_mobile') is-invalid @enderror"
                                   name="recipient_mobile" autocomplete="off" value="{{ old('recipient_mobile') }}"  required>
                            @error('recipient_mobile')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="charge" class="col-2 col-form-label text-right ">收费(元)</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('charge') is-invalid @enderror"
                                   name="charge" autocomplete="off" value="{{ old('charge') }}" >
                            @error('charge')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collect_fee" class="col-2 col-form-label text-right text-muted">到付金额(元)</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('collect_fee') is-invalid @enderror"
                                   name="collect_fee" autocomplete="off" value="{{ old('collect_fee') }}"  >
                            @error('collect_fee')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="ordering_remark" class="col-2 col-form-label text-right text-muted">下单备注</label>
                        <div class="col-8">
                            <textarea class="form-control @error('ordering_remark') is-invalid @enderror"
                                      name="ordering_remark" autocomplete="off"  >{{ old('ordering_remark') }}</textarea>
                            @error('ordering_remark')
                            <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-success form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList=new Vue({
            el:'#list',
            data:{
                owners:[
                        @foreach($owners as $owner)
                    {id:'{{$owner->id}}',name:'{{$owner->name}}'},
                    @endforeach
                ],
                owner_id:'{{old('owner_id')}}',
                origination:'{{old('origination')}}',
            },
            methods:{
                owner_seek:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    if($val==='')_this.owner_id='';
                    else
                        _this.owners.forEach(function (owner) {
                            if (owner.name.includes($val)){
                                _this.owner_id=owner.id;
                            }
                        });
                },
            },
        });
    </script>
@endsection