@extends('layout.admin.main')
@push('css')
    <style>

        .center input, .center button {
            width: 50%;
            margin: 20px auto;
            font-size: 100%;
            text-align: center;
            padding: 10px;
        }

        div.btn button {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0;
            width: 50%;
            cursor: pointer;

        }

        .btn {
            border-radius: 4px !important;
        }

        label:after {
            display: none;
        }

        p.center {
            color: #9c3328;
            text-align: center;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="masteredit">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">スタッフ管理</h2>
            <p style="margin-bottom: 15px; font-size: 15px; color: #222222">管理者以外の方にこのアカウントを運用する権限を与えることができます。</p>
            <a >
                <button style="padding: 6px 20px 6px 20px" class="btn btn-primary btn-sm" data-toggle="modal" id ="openModal" data-target="#addEmployeeModal">スタッフ追加
                </button>
            </a> &nbsp;
{{--            <a style="margin-left: 11px;" href={{route('addSettingBotAccess')}}>--}}
{{--                <button style="padding: 6px 20px 6px 20px" class="btn btn-info btn-sm" >アカウント権限設定--}}
{{--                </button>--}}
{{--            </a>--}}
            <a style="margin-left: 11px;" href={{route('settingRoleAccess')}}>
                <button style="padding: 6px 20px 6px 20px" class="btn  btn-info btn-sm" >スタッフ権限設定
                </button>
            </a>
            <br><br>
            <table class="table table-bordered">
                <tbody>
                <tr>
                    <th>No</th>
                    <th>メールアドレス</th>
                    <th>スタッフ名</th>
                    <th>権限</th>
                    <th>その他</th>
                    <th>削除</th>
                </tr>
                @foreach($employees as $k => $v)
                    <tr>
                        <td>{{ $k + 1 }}</td>
                        <td>{{ $v->email }}</td>
                        <td>{{ $v->username }}</td>
                        <td>
                            @foreach($roles as $role)
                                @if($role->id == $v->level)
                                    {{ $role->name }}
                                @endif
                            @endforeach
                        </td>
                        <td>
                            <div>
                                <a href="javascript:void(0)" onclick="openModalEdit({{ $v }})">
                                    <button class="btn btn-primary btn-sm" style="width: 95px;">編集</button>
                                </a>
                            </div>
                        </td>
                        <td>
                            <div style="margin-top: 5px;">
                                <a href="javascript:void(0)" onclick="deleteEmployee({{$v->id}})">
                                    <i class="fa fa-trash" style="font-size: 30px;color: #8a8484"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </section>
    </article>
    <div class="modal fade" id="addEmployeeModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="padding:0px !important">
                <form class="form-horizontal" id="addEmployeeForm">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" style="color:#000">スタッフ追加</h4>
                    </div>

                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-xs-4 control-label">スタッフ名</label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control input-sm" name="username"/>
                                <span class="errors" id="username" style="min-width: 280px"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-4 control-label">メールアドレス</label>
                            <div class="col-xs-7">
                                <input type="email" class="form-control input-sm" name="email">
                                <span class="errors" id="email" style="min-width: 280px"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-4 control-label">パスワード</label>
                            <div class="col-xs-7">
                                <input type="password" class="form-control input-sm" name="password">
                                <span class="errors" id="password" style="min-width: 280px"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-4 control-label">権限</label>
                            <div class="col-xs-7">
                                <select class="form-control" name="level">
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-4 control-label">運用アカウント</label>
                            <div class="col-xs-7" style="margin-top: 8px">
                                    @foreach($allBot as $bot)
                                        <input type="checkbox" id="access_{{$bot->id}}" name="access[{{$bot->id}}]" value="{{$bot->id}}" @if($bot->freePlan == 1 && $bot->accessNumber == 1) onclick="showAlertNewFreePlan({{$bot->id}})"@endif>
                                        <label for="bot_{{$bot->id}}">{{$bot->view_name}}</label><br>
                                    @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer" style="text-align: center">
                        <button type="submit" data-style="zoom-in" class="btn btn-primary ladda-button pull-center">
                            <i class="fa fa-save"></i> 保存
                        </button>
{{--                        <button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>--}}
{{--                            キャンセル--}}
{{--                        </button>--}}
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editEmployeeModal" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content" style="padding:0px !important">
                <form class="form-horizontal" id="editEmployeeForm">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" style="color:#000">スタッフ情報編集</h4>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="id">
                        <div class="form-group">
                            <label class="col-xs-4 control-label">スタッフ名</label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control input-sm" name="username"/>
                                <span class="errors" id="username" style="min-width: 280px"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-4 control-label">メールアドレス</label>
                            <div class="col-xs-7">
                                <input type="email" class="form-control input-sm" name="email">
                                <span class="errors" id="email" style="min-width: 280px"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-4 control-label">権限</label>
                            <div class="col-xs-7">
                                <select class="form-control" name="level">
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-4 control-label">運用アカウント</label>
                            <div class="col-xs-7" style="margin-top: 8px" id="show_bot_access">
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer" style="text-align: center">
                        <button type="submit" data-style="zoom-in" class="btn btn-primary ladda-button pull-center">
                            <i class="fa fa-save"></i> 保存
                        </button>
{{--                        <button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>--}}
{{--                            キャンセル--}}
{{--                        </button>--}}
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function deleteEmployee(user_id) {
            message = '削除しますが、宜しいですか？';
            bootbox.confirm(message, function (result) {
                if (result) {
                    $.ajax({
                        url: `/admin/employees-management/delete/${user_id}`,
                        method: 'post',
                        beforeSend: function () {
                            $.LoadingOverlay('show');
                        },
                        success: function (response) {
                            $.LoadingOverlay('hide');
                            if (response.success) {
                                window.location.reload();
                            }
                        },
                        error: function () {
                            $.LoadingOverlay('hide');
                        }
                    });
                }
            })
        }

        $('#addEmployeeForm').submit(function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            $('.errors').html('');
            $.ajax({
                url: '/admin/employees-management/add',
                method: 'post',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $.LoadingOverlay('show');
                },
                success: function (response) {
                    $.LoadingOverlay('hide');
                    if (response.success) {
                        window.location.reload();
                    }else{
                        if(response.isNoAdd){
                            alert(response.errors);
                        }else{
                            $.each(response.errors, function (a, b) {
                                $('.form-group').find('.errors#' + a).text(b[0])
                            });
                        }

                    }
                    // var errorText = '';
                    // if (typeof (response.errors.username) !== 'undefined')
                    //     errorText += `<p class="center">${response.errors.username[0]}</p>`;
                    // if (typeof (response.errors.password) !== 'undefined')
                    //     errorText += `<p class="center">${response.errors.password[0]}</p>`;
                    // if (typeof (response.errors.email) !== 'undefined')
                    //     errorText += `<p class="center">${response.errors.email[0]}</p>`;
                    // $('.error').append(errorText);
                },
                error: function () {
                    $.LoadingOverlay('hide');
                }
            });
        });

        function openModalEdit(data) {
            $('#show_bot_access').html('');
            $('.errors').html('');
            $('input[name=id]').val(data.id);
            $('input[name=username]').val(data.username);
            $('input[name=email]').val(data.email);
            $('select[name=level]').val(data.level);
            $.ajax({
                url: '/ajax/employees-management/get-list-bot-access',
                method: 'post',
                data: { id: data.id},
                success: function (response) {
                    if (response.success) {
                        if (response.success) {
                            console.log(response.allBotNew);
                            $.each(response.allBotNew, function (index, item) {
                                if(item.checked == true) {
                                    $('#show_bot_access').append("<input type='checkbox' id='edit_access_"+ index +"' name='editAccess["+ index + "]' value='" + index + "' checked>" +
                                        "<label for='edit_access_"+ index +"'>" + item.view_name + "</label><br>");
                                }else{
                                    if(item.freePlan == 1 && item.accessNumber == 1){
                                        $('#show_bot_access').append("<input type='checkbox' id='edit_access_"+ index + "' name='editAccess[" + index + "]' value='" + index + "' onclick='showAlertNewFreePlan2("+index+")'>" +
                                            "<label for='edit_access_"+ index + "'>" + item.view_name + "</label><br>");

                                    }else {
                                        $('#show_bot_access').append("<input type='checkbox' id='edit_access_"+ index + "' name='editAccess[" + index + "]' value='" + index + "'>" +
                                            "<label for='edit_access_"+ index + "'>" + item.view_name + "</label><br>");
                                    }
                                }
                            });
                        }
                    }
                },
                error: function () {
                }
            });
            $('#editEmployeeModal').modal();
        }

        $('#openModal').on('click',function () {
            $('#addEmployeeForm').find('input').val('');
            $('.errors').html('');
        });

        $('#editEmployeeForm').submit(function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            $('.error').html('');
            $.ajax({
                url: '/admin/employees-management/edit',
                method: 'post',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $.LoadingOverlay('show');
                },
                success: function (response) {
                    $.LoadingOverlay('hide');
                    if (response.success) {
                        window.location.reload();
                    }else{
                        if(response.isNoAdd){
                            alert(response.errors);
                        }else{
                            $.each(response.errors, function (a, b) {
                                $('.form-group').find('.errors#' + a).text(b[0])
                            });
                        }

                    }
                    // var errorText = '';
                    // if (typeof (response.errors.username) !== 'undefined')
                    //     errorText += `<p class="center">${response.errors.username[0]}</p>`;
                    // if (typeof (response.errors.email) !== 'undefined')
                    //     errorText += `<p class="center">${response.errors.email[0]}</p>`;
                    //
                    // $('.error').append(errorText);
                },
                error: function () {
                    $.LoadingOverlay('hide');
                }
            });
        });
        function showAlertNewFreePlan(id){

            if( $('#access_'+id).is(':checked') ) {
                $('#access_' + id).filter(':checkbox').prop('checked', false);
                alert('現在のプランは利用できない機能です。アップグレードが必要になります。');
            }
        }
        function showAlertNewFreePlan2(id){

            if( $('#edit_access_'+id).is(':checked') ) {
                $('#edit_access_' + id).filter(':checkbox').prop('checked', false);
                alert('現在のプランは利用できない機能です。アップグレードが必要になります。');
            }
        }
    </script>
@endpush