@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('waybill.waybillPriceModel.menu')
                <li class="nav-item">
                    <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('edit',4)}">修改</a>
                </li>
        @endcomponent
    </div>
    <div class="container-fluid" id="list">
        <div class="card">
            <div class="card-body">
                <form method="POST" action='{{url("waybill/waybillPriceModel/{$waybillPriceModel->id}")}}'>
                    @csrf
                    @method('PUT')
                    <div class="form-group row">
                        <label for="carrier_id" class="col-2 col-form-label text-right">承运商</label>
                        <div class="col-8">
                            <select name="WaybillPriceModel[carrier_id]" v-model="inputting.WaybillPriceModel.carrier_id" style="width: 30%;" class="form-control">
                                <option v-for="carrier in carriers" :value="carrier.id">@{{carrier.name}}</option>
                            </select>

                            <div class="col-sm-5">
                                <p class="form-control-static text-danger small font-weight-bold">{{ $errors->first('WaybillPriceModel.carrier_id') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="province_id"  class="col-2 col-form-label text-right">选择省份</label>
                        <div class="col-8" >
                            <select name="WaybillPriceModel[province_id]" v-model="inputting.WaybillPriceModel.province_id" @change="changeProvince($event)" style="width: 30%;"
                            class="form-control">
                                <option v-for="province in provinces" :value="province.id">@{{province.name}}</option>
                            </select>

                            <div class="col-sm-5">
                                <p class="form-control-static text-danger small font-weight-bold">{{ $errors->first('WaybillPriceModel.province_id') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="city_id"  class="col-2 col-form-label text-right">选择城市</label>
                        <div class="col-8" >
                            <select name="WaybillPriceModel[city_id]" v-model="inputting.WaybillPriceModel.city_id" style="width: 30%;" class="form-control">
                                <option v-for="city in cities" :value="city.id">@{{city.name}}</option>
                            </select>

                            <div class="col-sm-5">
                                <p class="form-control-static text-danger small font-weight-bold">{{ $errors->first('WaybillPriceModel.city_id') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="unit_id"  class="col-2 col-form-label text-right">货物单位</label>
                        <div class="col-8" >
                            <select name="WaybillPriceModel[unit_id]" v-model="inputting.WaybillPriceModel.unit_id" style="width: 30%;" class="form-control">
                                <option v-for="unit in units" :value="unit.id" >@{{unit.name}}</option>
                            </select>

                            <div class="col-sm-5">
                                <p class="form-control-static text-danger small font-weight-bold">{{ $errors->first('WaybillPriceModel.unit_id') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="range_min" class="col-2 col-form-label text-right">计价区间</label>
                        <div class="col-8 form-inline">
                            <input type="text" style="width: 20%" class="form-control @error('WaybillPriceModel.range_min') is-invalid @enderror"
                                   name="WaybillPriceModel[range_min]" autocomplete="off" value="{{old('WaybillPriceModel')['range_min']?old('WaybillPriceModel')['range_min']:$waybillPriceModel->range_min}}" >&nbsp;&nbsp;--&nbsp;&nbsp;
                            <input type="text"  style="width: 20%" class="form-control @error('WaybillPriceModel.range_max') is-invalid @enderror"
                                   name="WaybillPriceModel[range_max]" autocomplete="off" value="{{old('WaybillPriceModel')['range_max']?old('WaybillPriceModel')['range_max']:$waybillPriceModel->range_max}}" >
                            @error('WaybillPriceModel.range_min')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                            @error('WaybillPriceModel.range_max')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="unit_price" class="col-2 col-form-label text-right">单价</label>
                        <div class="col-8">
                            <input type="text"  class="form-control @error('WaybillPriceModel.unit_price') is-invalid @enderror"
                                   name="WaybillPriceModel[unit_price]" autocomplete="off" value="{{old('WaybillPriceModel')['unit_price']?old('WaybillPriceModel')['unit_price']:$waybillPriceModel->unit_price}}" >
                            @error('WaybillPriceModel.unit_price')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="base_fee" class="col-2 col-form-label text-right">起步费(元)</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('WaybillPriceModel.base_fee') is-invalid @enderror"
                                   name="WaybillPriceModel[base_fee]" autocomplete="off" value="{{old('WaybillPriceModel')['base_fee']?old('WaybillPriceModel')['base_fee']:$waybillPriceModel->base_fee}}" >
                            @error('WaybillPriceModel.base_fee')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="initial_weight" class="col-2 col-form-label text-right">最低计数</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('WaybillPriceModel.initial_weight') is-invalid @enderror"
                                   name="WaybillPriceModel[initial_weight]" autocomplete="off" value="{{old('WaybillPriceModel')['initial_weight']?old('WaybillPriceModel')['initial_weight']:$waybillPriceModel->initial_weight}}" >
                            @error('WaybillPriceModel.initial_weight')
                            <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>
        let insertVue=new Vue({
            el:'#list',
            data:{
                inputting:{
                    WaybillPriceModel:{
                        carrier_id:'{{old('WaybillPriceModel')['carrier_id']?old('WaybillPriceModel')['carrier_id']:$waybillPriceModel->carrier_id}}',
                        province_id:'{{old('WaybillPriceModel')['province_id']?old('WaybillPriceModel')['province_id']:$waybillPriceModel->province_id}}',
                        city_id:'{{old('WaybillPriceModel')['city_id']?old('WaybillPriceModel')['city_id']:$waybillPriceModel->city_id}}',
                        unit_id:'{{old('WaybillPriceModel')['unit_id']?old('WaybillPriceModel')['unit_id']:$waybillPriceModel->unit_id}}',
                    }
                },
                provinces:[
                    @foreach($provinces as $province)
                    {id:'{{$province->id}}',name:'{{$province->name}}' },
                    @endforeach
                ],
                cities:[
                    @foreach($cities as $city)
                    {id:'{{$city->id}}',name:'{{$city->name}}'},
                    @endforeach
                ],
                carriers:[
                     @foreach($carriers as $carrier)
                    {id:'{{$carrier->id}}',name:'{{$carrier->name}}'},
                    @endforeach
                ],
                units:[
                    @foreach($units as $unit)
                    {id:'{{$unit->id}}',name:'{{$unit->name}}'},
                    @endforeach
                ],
                waybillPriceModel:[
                        {id:'{{$waybillPriceModel->id}}',created_at:'{{$waybillPriceModel->created_at}}',
                        carrier_id:'{{$waybillPriceModel->carrier_id}}',province_id:'{{$waybillPriceModel->province_id}}',
                        city_id:'{{$waybillPriceModel->city_id}}',unit_id:'{{$waybillPriceModel->unit_id}}',
                        section:'{{$waybillPriceModel->section}}',unit_price:'{{$waybillPriceModel->unit_price}}',initial_weight:'{{$waybillPriceModel->initial_weight}}'},
                ]
            },
            mounted:function(){
                this.inputting.WaybillPriceModel.city_id='{{$waybillPriceModel->city_id}}';
            },
            methods:{
                changeProvince(e){
                    let _this=this;
                    let val=e.target.value;
                    axios.get('../cities/'+val).then(
                        function (response) {
                            _this.cities=response.data.cities;
                        }
                    );
                }
            },
/*                changeProvince(){
                    let _this=this;
                    let province_id=this.inputting.WaybillPriceModel.province_id;
                    this.provinces.forEach(function (province) {
                        if(province.id+''===province_id+''){
                            _this.cities=province.cities;
                            return
                        }
                        return null
                    })
                }*/
        });

    </script>
@endsection
