@extends('layouts.app')

@section('title', '详情')
@section('content')
    @include('shared._messages')
    @include('shared._error')
    <div class="row" id="list">
        <div class="col-12">
            <div class="card ">
                <div class="card-body">
                    <div class="text-center">
                        发布人：{{ $requirement->creator->name }}
                    </div>
                    <div class="text-center">
                        分数：{{ $requirement->score }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h1 class="text-center mt-3 mb-3">
                        {{ $requirement->title }}
                    </h1>
                    <div class="text-center mt-4 mb-4">
                        {{ $requirement->content }}
                    </div>
                </div>
            </div>
        </div>
        @if($requirement->status==='待接收')
            <div class="col-12 text-center mt-4">
                <form action="{{ route('requirements.edit',$requirement->id) }}" method="get"
                      style="display: inline-block;"
                      onsubmit="return">
                    <button type="submit" class="btn btn-warning btn-sm">
                        <i class="far fa-trash-alt"></i> 编辑
                    </button>
                </form>
            </div>
            <div class="col-12">
                <div class="text-center m-4">
                    <form action="{{ route('requirements.begin', $requirement->id) }}" method="post"
                          style="display: inline-block;"
                          onsubmit="return confirm('您确定要开始吗？');">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <template v-for="(item,i) in items">
                                <div class="row">
                                    <div class="col-auto mb-4">
                                        <select class="form-control" :name="'users['+i+'][name]'"
                                                required {{ $requirement->workers->count()>0 ? 'disabled' :''}}>
                                            <option value="" hidden disabled selected>请选择用户
                                            </option>
                                            @foreach ($workers as $value)
                                                <option
                                                    value="{{ $value->id }}">
                                                    {{ $value->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div v-if="i!==0" class="col-1 mb-4 mt-1">
                                        <button class="btn btn-sm btn-primary float-right" type="button"
                                                @click="items.splice(i,1)">-
                                        </button>
                                    </div>
                                </div>
                            </template>
                            <button class="btn btn-sm btn-primary float-right" type="button"
                                    @click="addItem">添加
                            </button>
                        </div>
                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="far fa-trash-alt"></i> 开始开发
                        </button>
                    </form>
                </div>
            </div>

        @elseif($requirement->status==='开发中')
            <div class="col-12">
                <div class="text-center m-4">
                    <form action="{{ route('requirements.finish',$requirement->id) }}" method="post"
                          style="display: inline-block;"
                          onsubmit="return confirm('您确定要完成开发吗？');">
                        {{ csrf_field() }}
                        <div class="form-group">
                            @foreach($requirement->workers as $worker)
                                <div class="row">
                                    <div class="col-5 mb-4">
                                        <input class="form-control" disabled value="{{ $worker->name }}"></input>
                                        <input class="form-control" hidden
                                               :name="'users['+ {{ $loop->index }} +'][name]'"
                                               value="{{ $worker->id }}"></input>
                                    </div>
                                    <div class="col-5 mb-4">
                                        <input class="form-control" type="number"
                                               :name="'users['+ {{ $loop->index }} +'][score]'"
                                               placeholder="请填写分数"
                                               required></input>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="well well-sm">
                            <button type="submit" class="btn btn-primary"> 完成开发</button>
                        </div>
                    </form>
                </div>
            </div>
        @elseif($requirement->status==='待验收')
            <div class="col-12 text-center">
                @foreach($requirement->workers as $worker)
                    <div class="row">
                        <div class="col-5 m-4">姓名： {{ $worker->name }}</div>
                        <div class="col-5 m-4">分数：{{ $worker->pivot->score }}</div>
                    </div>
                @endforeach
            </div>
            <div class="m-4">
                <form action="{{ route('requirements.review',$requirement->id) }}" method="post"
                      style="display: inline-block;"
                      onsubmit="return confirm('您确定要完成验收吗？');">
                    {{ csrf_field() }}
                    <input type="number" name="flag" hidden :value="reviewFlag">

                        <button @click="reviewFlag=1" type="submit" class="btn btn-primary"> 验收通过</button>


                        <button @click="reviewFlag=0" type="submit" class="btn btn-danger"> 验收未通过</button>

                </form>
            </div>
        @elseif($requirement->status==='验收通过')
            <div class="col-12 text-center">
                    @foreach($requirement->workers as $worker)
                        <div class="row">
                            <div class="col-5 m-4">姓名： {{ $worker->name }}</div>
                            <div class="col-5 m-4">分数：{{ $worker->pivot->score }}</div>
                        </div>
                    @endforeach
            </div>
        @elseif($requirement->status==='验收未通过')
            <div class="col-12 text-center">
                @foreach($requirement->workers as $worker)
                    <div class="row">
                        <div class="col-5 m-4">姓名： {{ $worker->name }}</div>
                        <div class="col-5 m-4">分数：{{ $worker->pivot->score }}</div>
                    </div>
                @endforeach
            </div>
            <div class="m-4">
                <form action="{{ route('requirements.againReview',$requirement->id) }}" method="post"
                      style="display: inline-block;"
                      onsubmit="return confirm('您确定要再次申请验收流程吗？');">
                    {{ csrf_field() }}
                    <button type="submit" class="btn btn-primary"> 再次申请验收流程</button>

                </form>
            </div>
        @endif
@endsection
@section('lastScript')
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                items: [{}],
                reviewFlag: 0,
                @if($requirement->id)
                workers: {!! $workers !!},
                @endif
            },
            methods: {
                addItem() {
                    this.items.push({});
                }
            }
        })
    </script>
@endsection