@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('maintenance.menu')
        @endcomponent
        @component('maintenance.user.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 mt-3" id="editPanel">
        <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/user/{$user->id}")}}'>
                    @csrf
                    @method('PUT')
                    <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{{$user->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="email" class="col-2 col-form-label text-right">邮箱</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('email') is-invalid @enderror"
                                   name="email" autocomplete="off" value="@if(old('email')){{old('email')}}@else{{$user->email}}@endif" required>
                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="role" class="col-2 col-form-label text-md-right">角色</label>

                        <div class="col-8">
                            <input name="role" type="hidden" v-model="rolesStr" required>
                            <div class="input-group">
                                <select id="roleAddingItem" class="form-control">
                                    <option :value="role.id" v-for="role in rolesAll">@{{ role.name }}</option>
                                </select>
                                <span class="input-group-append">
                                            <span class="input-group-text btn-outline-info" style="cursor: pointer;" @click="addRole">
                                                添加左边的角色
                                            </span>
                                        </span>
                            </div>
                            <select size="8" class="form-control @error('role') is-invalid @enderror "
                                    :class="rolesStr?'tooltipTarget':''" title="两次点击移除目标">
                                <option :value="role.id" v-for="role in roles" @click="clickingRoleOption">@{{ role.name }}</option>
                            </select>
                            @error('role')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="role" class="col-2 col-form-label text-md-right">承运商</label>

                        <div class="col-md-8">
                            <div class="input-group">
                                <select id="carrierAddingItem" class="form-control">
                                    <option :value="carrier.id" v-for="carrier in carrierAll">@{{ carrier.name }}</option>
                                </select>
                                <span class="input-group-append">
                                            <span class="input-group-text btn-outline-info" style="cursor: pointer;" @click="addCarrier">
                                                添加左边的承运商
                                            </span>
                                        </span>
                            </div>
                            <select size="8" class="form-control "
                                    title="两次点击移除目标">
                                <option :value="carrier.id" v-for="carrier in carriers" @dblclick="clickingCarrierOption">
                                    @{{ carrier.name }}
                                </option>
                            </select>
                            <div hidden v-for="carrier in carriers">
                                <input hidden name="carrier_id[]" :value="carrier.id">
                            </div>
                        </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 vueList=new Vue({
            el:"#editPanel",
            data:{
                rolesAll:[
                        @foreach( $rolesAll as $role )
                    {id:'{{$role->id}}',name:'{{$role->name}}',},
                    @endforeach
                ],
                roles:[
                        @foreach( $roles as $role )
                    {id:'{{$role->id}}',name:'{{$role->name}}',},
                    @endforeach
                ],
                rolesStr:'{{ old('role') }}',
                carrierAll:[
                        @foreach($carriers as $carrier)
                    {id:'{{$carrier->id}}',name:'{{$carrier->name}}'},
                    @endforeach
                ],
                carriers:[
                    @foreach($carrierUser as $carrier)
                    {id:'{{$carrier->id}}',name:'{{$carrier->name}}'},
                    @endforeach
                ],
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                this.rolesCompileToStr()
            },
            methods:{
                addRole:function () {
                    let $roleAddingItem = $('#roleAddingItem');
                    let val=$roleAddingItem.val();
                    let roleName = $roleAddingItem.find("option:selected").text();
                    let isLackOf=this.roles.every(function(role){
                        return role.id !== val;
                    });
                    if(isLackOf){
                        this.roles.push({id:val,name: roleName});
                        this.rolesCompileToStr()
                    }else{
                        tempTip.setDuration(1500);
                        tempTip.show('已添加'+roleName)
                    }
                },
                clickingRoleOption:function(e){
                    let target = $(e.target);
                    if(typeof target.attr('data-clicked')=='undefined'||target.attr('data-clicked')==='0'){
                        target.attr('data-clicked',1);
                        setTimeout(function(){target.attr('data-clicked','0');},1500)
                    }
                    else{
                        target.attr('data-clicked',parseInt(target.attr('data-clicked'))+1);
                        this.removeRole(target.val(),target.find("option:selected").text())
                    }
                },
                removeRole:function(id,name){
                    let _this=this;
                    tempTip.confirm('确定要删除角色' + name + '吗？',function () {
                        for(let i=0;i<_this.roles.length;i++){
                            if(_this.roles[i].id===id){
                                _this.roles.splice(i, 1);
                                _this.rolesCompileToStr();
                                break;
                            }
                        }
                    });
                },
                rolesCompileToStr:function(){
                    let ids=this.roles.map(function(role){
                        return role.id;
                    });
                    this.rolesStr=ids.join(',');
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },20);
                },
                addCarrier:function () {
                    let $carrierAddingItem = $('#carrierAddingItem');
                    let val=$carrierAddingItem.val();
                    let carrierName = $carrierAddingItem.find("option:selected").text();
                    let isLackOf=this.carriers.every(function(carrier){
                        return carrier.id !== val;
                    });
                    if(isLackOf){
                        this.carriers.push({id:val,name: carrierName})
                    }else{
                        tempTip.setDuration(1500);
                        tempTip.show('已添加'+carrierName)
                    }
                },
                clickingCarrierOption:function(e){
                    let target = $(e.target);
                    for (let i=0;i<this.carriers.length;i++){
                        if(this.carriers[i].id===target.val()){
                            this.carriers.splice(i,1);
                            break;
                        }
                    }
                },
            },
        });

    </script>
@endsection