@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;
        }
        .col-md-3 {
            padding: unset;
        }
        .table-striped td {
            background: unset;
        }

        table thead tr{
            height: 35px !important;
            font-size: 13px !important;
        }
        table tbody tr{
            height: 39px !important;
            font-size: 13px !important;

        }
    </style>
    <script src="/css/plugins/datatables/dataTables.bootstrap.css"></script>
@endpush
@section('content')
    <article class="">
        <section class="masteredit">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">スタッフ権限設定</h2>
            <div class="row">
                <form action="{{ route('addSettingRoleAccess') }}" method="post">
                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                    <table class="table table-striped" style="width: 100%">
                        <thead>
                        <tr style="height: 35px !important;font-size: 13px !important">
                            <th style="width: 25%"></th>
                            <th style="width: 25%">副管理人</th>
                            <th style="width: 25%">運用者</th>
                            <th style="width: 25%">サポート</th>
                        </tr>
                        </thead>
                        <tbody>
                        @for($i = 0 ;$i < count($roleAccess); $i++)
                           <tr style="height: 39px !important;font-size: 13px !important;border-bottom: 1px solid #767676">
                               <td>{{ $roleAccess[$i]['name'] }}</td>
                                <td>
{{--                                    {{ $roleAccess[$i]['id'] }}--}}
                                    <input type="checkbox" name="access1[{{ $roleAccess[$i]['id'] }}]" id="access1_{{ $i }}" {{ $roleAccess[$i]['checkedRole1'] ? 'checked' : '' }}>
                                </td>
                               <td>
                                   <input type="checkbox" name="access2[{{ $roleAccess[$i]['id'] }}]" id="access2_{{ $i }}" {{ $roleAccess[$i]['checkedRole2'] ? 'checked' : '' }}>
                               </td>
                               <td>
                                   <input type="checkbox" name="access3[{{ $roleAccess[$i]['id'] }}]" id="access3_{{ $i }}" {{ $roleAccess[$i]['checkedRole3'] ? 'checked' : '' }}>
                               </td>
                            </tr>
                        @endfor
                        </tbody>
                    </table>
                    <div class="col-md-12" style="margin-top: 20px; text-align: center">
                        <button class="btn btn-primary" style="padding: 10px 20px 10px 20px">保存</button>
                    </div>
                </form>
            </div>
        </section>
    </article>
@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);
            $('.error').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();
                    }
                    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');
                }
            });
        });

    </script>
@endpush