@extends('layouts.app')
@section('title')录入-纸箱@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.paperBox.menu')@endcomponent
    </div>
    <div class="container-fluid" id="form">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <form method="POST" action="{{ url('maintenance/paperBox') }}">
                    @csrf
                    <div class="form-group row text-center">
                        <div class="col-12 text-danger">

                            注意：为保证数据正确您输入的长宽高将会被重新定义<br>
                            最大值为长，其次为宽，最小为高
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="model" class="col-2 col-form-label text-right">型号</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('model') is-invalid @enderror"
                                   name="model" autocomplete="off" value="{{ old('model')}}" required>
                            @error('model')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="length" class="col-2 col-form-label text-right">长（cm）</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('length') is-invalid @enderror"
                                   name="length" autocomplete="off" value="{{ old('length') }}" required>
                            @error('length')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="width" class="col-2 col-form-label text-right">宽（cm）</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('width') is-invalid @enderror"
                                   name="width" autocomplete="off" value="{{ old('width') }}" required>
                            @error('width')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="height" class="col-2 col-form-label text-right">高（cm）</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('height') is-invalid @enderror"
                                   name="height" autocomplete="off" value="{{ old('height') }}" required>
                            @error('height')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="height" class="col-2 col-form-label text-right">选择货主</label>
                        <div class="col-3">
                            <div style="max-height: 130px;overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;opacity:0.5;text-align: center;transform:scale(0.9)"  v-if="owners.length>0">
                                <ul class="list-group">
                                    <li id="selectLi" title="双击添加货主"   v-for="owner in owners" @dblclick="selectedOwner(owner)" style="list-style: none"><a >@{{ owner.name }}</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-5">
                            <div style="max-height: 130px;overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;text-align: center;" v-if="selectedOwners.length>0">
                                <ul class="list-group">
                                    <li v-for="selectedOwner in selectedOwners" title="双击删除货主"  @dblclick="owner(selectedOwner)" style="list-style: none">
                                        <a>@{{ selectedOwner.name }}</a>
                                        <input hidden name="owner_id[]" :value="selectedOwner.id">
                                    </li>
                                </ul>
                            </div>
                        </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')
    <style>
        li a:hover{background-color: #4aa0e6;display: block;cursor:pointer}
    </style>
    <script>
        let vue=new Vue({
            el:'#form',
            data:{
                owners:[
                    @foreach($owners as $owner)
                        {id:'{{$owner->id}}',name:'{{$owner->name}}'},
                    @endforeach
                ],
                selectedOwners:[],
            },

            methods:{
                selectedOwner(paperBox_owner){
                    for (let i=0;i<this.owners.length;i++){
                        if(this.owners[i]===paperBox_owner){
                            this.owners.splice(i,1);
                            break;
                        }
                    }
                    this.selectedOwners.push(paperBox_owner);
                },
                owner(selectedOwner){
                    for (let i=0;i<this.selectedOwners.length;i++){
                        if(this.selectedOwners[i]===selectedOwner){
                            this.selectedOwners.splice(i,1);
                            break;
                        }
                    }
                    this.owners.push(selectedOwner);
                },
            },
        });
    </script>
@endsection