@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('waybill.billingModel.menu')@endcomponent
    </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('billingModel') }}">
                    @csrf
                    <div class="form-group row">
                        <label for="carrier_id" class="col-2 col-form-label text-right">承运商</label>
                        <div class="col-8">
                            <select name="BillingModel[carrier_id]" style="width: 30%;height: 30px" v-model="inputting.BillingModel.carrier_id">
                                    <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('BillingModel.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="BillingModel[province_id]" style="width: 30%;height: 30px" v-model="inputting.BillingModel.province_id" @change="changeProvince($event)">
                                <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('BillingModel.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="BillingModel[city_id]" style="width: 30%;height: 30px" v-model="inputting.BillingModel.city_id">
                                <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('BillingModel.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="BillingModel[unit_id]" style="width: 30%;height: 30px" v-model="inputting.BillingModel.unit_id">
                                <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('BillingModel.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('BillingModel.range_min') is-invalid @enderror"
                                   name="BillingModel[range_min]" autocomplete="off" value="{{ old('BillingModel')['range_min'] }}" >----
                            <input type="text" style="width: 20%" class="form-control @error('BillingModel.range_max') is-invalid @enderror"
                                   name="BillingModel[range_max]" autocomplete="off" value="{{ old('BillingModel')['range_max'] }}" >
                            @error('BillingModel.range_min')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            @error('BillingModel.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('BillingModel.unit_price') is-invalid @enderror"
                                   name="BillingModel[unit_price]" autocomplete="off" value="{{ old('BillingModel')['unit_price'] }}" >
                            @error('BillingModel.unit_price')
                            <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('BillingModel.initial_weight') is-invalid @enderror"
                                   name="BillingModel[initial_weight]" autocomplete="off" value="{{ old('BillingModel')['initial_weight'] }}" >
                            @error('BillingModel.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-success form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let insertVue=new Vue({
            el:'#list',
            data:{
                inputting:{
                    BillingModel:{
                        @if(isset(old('BillingModel')['province_id']))
                        province_id:'{{old('BillingModel')['province_id']}}',
                        @endif
                        @if(isset(old('BillingModel')['city_id']))
                        city_id:'{{old('BillingModel')['city_id']}}',
                        @endif
                        @if(isset(old('BillingModel')['carrier_id']))
                        carrier_id:'{{old('BillingModel')['carrier_id']}}',
                        @endif
                        @if(isset(old('BillingModel')['unit_id']))
                        unit_id:'{{old('BillingModel')['unit_id']}}',
                        @endif
                    }
                },
                provinces:[
                    @foreach($provinces as $province)
                        {id:'{{$province->id}}',name:'{{$province->name}}',cities:{!! $province->cities !!} },
                    @endforeach
                ],
                cities:[
                ],
                carriers:[
                    @foreach($carriers as $carrier)
                        {id:'{{$carrier->id}}',name:'{{$carrier->name}}'},
                    @endforeach
                ],
                units:[
                    @foreach($units as $unit)
                    {id:'{{$unit->id}}',name:'{{$unit->name}}'},
                    @endforeach
                ],
            },
           methods:{
               changeProvince(){
                   let _this=this;
                   let province_id=this.inputting.BillingModel.province_id;
                   this.provinces.forEach(function (province) {
                       if(province.id+''===province_id+''){
                           _this.cities=province.cities;
                           return
                       }
                       return null
                   })
               }
           },
        });

    </script>
@endsection