@extends('layouts.base')

@section('content')
@section('title', '编辑工作时间')
    <div class="w1200 m0a">
        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="#">编辑工作时间</a></li>
            </ul>
        </div>
        <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 col-md-2 control-label">姓名</label>
                        <div class="col-sm-9 col-xs-12">
                            {{$worker_info->name}}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 col-md-2 control-label">日期</label>
                        <div class="col-sm-9 col-xs-12">
                            {{$work_date}}
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                工作时间
                                <a class="btn btn-success" onclick="addTimeShow()"  style="color: #fff;"> 添加工作时间</a>
                            </div>
                            <div class="panel-body table-responsive">
                                <table cellspacing="0" cellpadding="0" class="table table-hover">
                                    <thead class="navbar-inner">
                                    <tr>
                                        <th class="col-md-3 col-lg-3">id</th>
                                        <th class="col-md-5 col-lg-3">开始时间</th>
                                        <th class="col-md-5 col-lg-3">结束时间</th>
                                        <th class="col-md-3 col-lg-3">状态</th>
                                        <th class="col-md-3 col-lg-3">操作</th>
                                    </tr>
                                    </thead>
                                    @foreach ($time_list as $v)
                                        <tr class="js-time-tr-show{{$v['id']}}">
                                            <td>{{$v['id']}}</td>
                                            <td class="js-show-work_hour_start">{{$v['work_hour_start']}}</td>
                                            <td class="js-show-work_hour_end">{{$v['work_hour_end']}}</td>
                                            <td class="js-show-status">
                                                @if($v['status']==1)休息@else正常@endif
                                            </td>
                                            <td>
                                                <a class="btn btn-success" onclick="editTime({{$v['id']}})" title='编辑' >编辑</a>
                                                @if($v['status']==1)
                                                    <a class="btn btn-success js-btn-status" data-status="0" onclick="changeStatus({{$v['id']}},this)" >工作</a>
                                                @else
                                                    <a class="btn btn-success js-btn-status" data-status="1"  onclick="changeStatus({{$v['id']}},this)" >休息</a>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr class="js-time-tr-edit{{$v['id']}}" style="display: none">
                                            <td>{{$v['id']}}</td>
                                            <td>
                                                <div class="input-group clockpicker">
                                                    <input type="text" class="form-control js-work_hour_start" value="{{$v['work_hour_start']}}">
                                                    <span class="input-group-addon">
                                                        <span class="fa fa-clock-o"></span>
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="input-group clockpicker">
                                                    <input type="text" class="form-control js-work_hour_end" value="{{$v['work_hour_end']}}">
                                                    <span class="input-group-addon">
                                                        <span class="fa fa-clock-o"></span>
                                                    </span>
                                                </div>
                                            </td>
                                            <td class="js-show-status">
                                                @if($v['status']==1)休息@else正常@endif
                                            </td>
                                            <td>
                                                <a class="btn btn-success" title='保存' onclick="saveTime({{$v['id']}})" >保存</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    <tr class="js-time-tr-add" style="display: none">
                                        <td></td>
                                        <td>
                                            <div class="input-group clockpicker">
                                                <input type="text" class="form-control js-work_hour_start" value="">
                                                    <span class="input-group-addon">
                                                        <span class="fa fa-clock-o"></span>
                                                    </span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group clockpicker">
                                                <input type="text" class="form-control js-work_hour_end" value="">
                                                    <span class="input-group-addon">
                                                        <span class="fa fa-clock-o"></span>
                                                    </span>
                                            </div>
                                        </td>
                                        <td class="js-show-status">
                                            正常
                                        </td>
                                        <td>
                                            <a class="btn btn-success" title='保存' onclick="addTime({{$worker_info['id']}},'{{$work_date}}')" >保存</a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="form-group"></div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-6 col-md-5 control-label"></label>
                        <div class="col-sm-6 col-xs-12">
                            <input type="button" name="back" onclick='history.back()' style=''
                                   value="返回"
                                   class="btn btn-default back"/>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        $(function(){

        })
        function editTime(id){
            var timeId = id;
            var showEleClass = '.js-time-tr-show'+timeId;
            var editEleClass = '.js-time-tr-edit'+timeId;
            $(showEleClass).hide();
            $(editEleClass).show();
        }
        function saveTime(id){
            var timeId = id;
            var showEleClass = '.js-time-tr-show'+timeId;
            var editEleClass = '.js-time-tr-edit'+timeId;
            var hourStart = $(editEleClass).find('.js-work_hour_start').val();
            var hourEnd = $(editEleClass).find('.js-work_hour_end').val();
            $.ajax({
                url: "{!! yzWebUrl('plugin.appointment.admin.workTime.eidtDateWorkTimes') !!}",
                type: "post",
                data: {
                    timeId:timeId,
                    hourStart:hourStart,
                    hourEnd:hourEnd
                },
                cache: false,
                success: function (data) {
                    alert(data.msg);
                    if(!data.result){

                    }else{
                        $(editEleClass).find('.js-work_hour_start').val(hourStart);
                        $(editEleClass).find('.js-work_hour_end').val(hourEnd);
                        $(showEleClass).find('.js-show-work_hour_start').text(hourStart);
                        $(showEleClass).find('.js-show-work_hour_end').text(hourEnd);
                        $(showEleClass).show();
                        $(editEleClass).hide();
                    }
                }
            })

        }
        function changeStatus(id,_this){
            var timeId = id;
            console.log(_this);
            var showEleClass = '.js-time-tr-show'+timeId;
            var editEleClass = '.js-time-tr-edit'+timeId;
            var status = parseInt($(_this).attr('data-status'));
            $.ajax({
                url: "{!! yzWebUrl('plugin.appointment.admin.workTime.changeStatus') !!}",
                type: "post",
                data: {
                    timeId:timeId,
                    status:status
                },
                cache: false,
                success: function (data) {
                    alert(data.msg);
                    if(!data.result){

                    }else{
                        $(editEleClass).find('.js-show-status').val(data.data.status_desc);
                        $(showEleClass).find('.js-show-status').text(data.data.status_desc);
                        $(showEleClass).find('.js-btn-status').text(data.data.status_btn_desc);
                        $(_this).attr('data-status',data.data.data_status);
                    }
                }
            })
        }
        function addTimeShow(){
            $('.js-time-tr-add').show();
        }

        function addTime(workId,workDate){
            var hourStart = $('.js-time-tr-add').find('.js-work_hour_start').val();
            var hourEnd = $('.js-time-tr-add').find('.js-work_hour_end').val();
            $.ajax({
                url: "{!! yzWebUrl('plugin.appointment.admin.workTime.addDateWorkTimes') !!}",
                type: "post",
                data: {
                    worker_id:workId,
                    hourStart:hourStart,
                    hourEnd:hourEnd,
                    work_date:workDate
                },
                cache: false,
                success: function (data) {

                    if(data.result===0){
                        alert(data.msg);
                    }else{
                        window.location.reload();
                        /*$('.js-time-tr-add').find('.js-work_hour_start').val('');
                        $('.js-time-tr-add').find('.js-work_hour_end').val('');
                        $('.js-time-tr-add').before(data);
                        $('.js-time-tr-add').hide()*/
                    }
                }
            })
        }
        require(['util', 'clockpicker'], function(u, $){
            $('.clockpicker :text').clockpicker({autoclose: true});

        });
    </script>
@endsection