@extends('admins.layouts.main')
@section('content')

{{--    <ul class="blocks-sm-100 blocks-lg-6 blocks-xxl-12">--}}
{{--        <li>--}}
{{--            <div class="panel panel-bordered">--}}
{{--                <div class="panel-heading">--}}
{{--                    <h3 class="panel-title">Panel Example - 1</h3>--}}
{{--                    <div class="panel-actions">--}}
{{--                        <a class="panel-action icon md-refresh-alt" data-toggle="panel-refresh" data-load-type="blue-only"--}}
{{--                           data-load-callback="customRefreshCallback" aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-minus" aria-expanded="true" data-toggle="panel-collapse"--}}
{{--                           aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-fullscreen" data-toggle="panel-fullscreen" aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-close" data-toggle="panel-close" aria-hidden="true"></a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="panel-body">--}}
{{--                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce--}}
{{--                        velit tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing--}}
{{--                        elit. Fusce velit tortor.</p>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </li>--}}
{{--        <li>--}}
{{--            <div class="panel panel-bordered">--}}
{{--                <div class="panel-heading">--}}
{{--                    <h3 class="panel-title">Panel Example - 1</h3>--}}
{{--                    <div class="panel-actions">--}}
{{--                        <a class="panel-action icon md-refresh-alt" data-toggle="panel-refresh" data-load-type="blue-only"--}}
{{--                           data-load-callback="customRefreshCallback" aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-minus" aria-expanded="true" data-toggle="panel-collapse"--}}
{{--                           aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-fullscreen" data-toggle="panel-fullscreen" aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-close" data-toggle="panel-close" aria-hidden="true"></a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="panel-body">--}}
{{--                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce--}}
{{--                        velit tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing--}}
{{--                        elit. Fusce velit tortor.</p>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </li>--}}
{{--        <li>--}}
{{--            <div class="panel panel-bordered">--}}
{{--                <div class="panel-heading">--}}
{{--                    <h3 class="panel-title">Panel Example - 1</h3>--}}
{{--                    <div class="panel-actions">--}}
{{--                        <a class="panel-action icon md-refresh-alt" data-toggle="panel-refresh" data-load-type="blue-only"--}}
{{--                           data-load-callback="customRefreshCallback" aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-minus" aria-expanded="true" data-toggle="panel-collapse"--}}
{{--                           aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-fullscreen" data-toggle="panel-fullscreen" aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-close" data-toggle="panel-close" aria-hidden="true"></a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="panel-body">--}}
{{--                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce--}}
{{--                        velit tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing--}}
{{--                        elit. Fusce velit tortor.</p>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </li>--}}
{{--        <li>--}}
{{--            <div class="panel panel-bordered">--}}
{{--                <div class="panel-heading">--}}
{{--                    <h3 class="panel-title">Panel Example - 1</h3>--}}
{{--                    <div class="panel-actions">--}}
{{--                        <a class="panel-action icon md-refresh-alt" data-toggle="panel-refresh" data-load-type="blue-only"--}}
{{--                           data-load-callback="customRefreshCallback" aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-minus" aria-expanded="true" data-toggle="panel-collapse"--}}
{{--                           aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-fullscreen" data-toggle="panel-fullscreen" aria-hidden="true"></a>--}}
{{--                        <a class="panel-action icon md-close" data-toggle="panel-close" aria-hidden="true"></a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="panel-body">--}}
{{--                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce--}}
{{--                        velit tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing--}}
{{--                        elit. Fusce velit tortor.</p>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </li>--}}
{{--    </ul>--}}

        <form id="form" action="{{ $form['action'] }}">
            @method($form['method'])
            <div class="row">
                @foreach($permissionList as $value)
                <div class="col-lg-6">
                    <!-- Example Panel Fullscreen -->
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">{{ $value['title'] }}</h3>
                        </div>
                        <div class="panel-body">
                            <div class="example table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr class="text-center">
                                        <th>項目</th>
                                        <th>新增</th>
                                        <th>讀取</th>
                                        <th>更新</th>
                                        <th>刪除</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($value['page'] as $page)
                                            <tr>
                                                <td>{{ $page['title'] }}</td>
                                                @foreach($page['operate'] as $operate_index => $operate)
                                                    <td>
                                                        @if($operate['can'] == 1)
                                                        <div class="checkbox-custom checkbox-primary">
                                                            <input type="checkbox" name="{{ $page['function_name'] }}[{{ $operate_index }}]" value="1" {{$operate['checked']}}>
                                                            <label></label>
                                                        </div>
                                                        @endif
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- End Example Panel Fullscreen -->
                </div>
                @endforeach
            </div>
        </form>
{{--    @foreach($permissionList as $value)--}}
{{--    <div class="panel panel-bordered">--}}
{{--        <div class="panel form-title-right">--}}
{{--            <div class="panel-heading col-12">--}}
{{--                <h4 class="example-title p-4"></h4>--}}
{{--            </div>--}}
{{--            <div class="panel-body">--}}
{{--                <div class="row row-lg">--}}
{{--                    <div class="col-12">--}}
{{--                        <h3 class="example-title">{{ $value['title'] }}</h3>--}}
{{--                    </div>--}}
{{--                    <div class="col-xl-12">--}}
{{--                        <!-- Example Horizontal Form -->--}}
{{--                        <div class="example table-responsive">--}}
{{--                            <table class="table table-bordered">--}}
{{--                                <thead>--}}
{{--                                <tr class="text-center">--}}
{{--                                    <th>項目</th>--}}
{{--                                    <th>新增</th>--}}
{{--                                    <th>讀取</th>--}}
{{--                                    <th>更新</th>--}}
{{--                                    <th>刪除</th>--}}
{{--                                </tr>--}}
{{--                                </thead>--}}
{{--                                <tbody>--}}
{{--                                    @foreach($value['page'] as $page)--}}
{{--                                    <tr>--}}
{{--                                        <td>{{ $page['title'] }}</td>--}}
{{--                                        @foreach($page['permission'] as $xxx)--}}
{{--                                        <td>--}}
{{--                                            <div class="checkbox-custom checkbox-primary">--}}
{{--                                                <input type="checkbox" name="">--}}
{{--                                                <label for=""></label>--}}
{{--                                            </div>--}}
{{--                                        </td>--}}
{{--                                        @endforeach--}}
{{--                                    </tr>--}}
{{--                                    @endforeach--}}

{{--                                </tbody>--}}
{{--                            </table>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--    @endforeach--}}

    <div class="panel panel-bordered">
        <div class="panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-12">
                        <div class="example-wrap">
                            <div class="example example-grid">
                                <div class="row">
                                    <div class="col-6 text-center">
                                        <a href="{{ route('admin.user_management.permission_settings.index') }}" class="btn btn-danger btn-lg waves-effect waves-classic"
                                                type="button">
                                            <i class="icon md-undo" aria-hidden="true"></i>返回
                                        </a>&nbsp;&nbsp;
                                    </div>
                                    <div class="col-6 text-center">
                                        <button class="btn btn-success btn-lg waves-effect waves-classic "
                                                type="button"
                                                id="submit_button">
                                            <i class="icon md-check" aria-hidden="true"></i>確定
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var form;
        $(document).ready(function () {


            var requestCache = {};
            var clickObj;
            $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
        
                if (options.type.toLowerCase() === "post" || options.type.toLowerCase() === "put") {
                    var key = options.url ;
                    // 同url post時 ajax 中止
                    if (requestCache[key]&& (new Date() - requestCache[key]) < 5000) {
                        console.log('Ajax was repeat. abort url:'+key);
                        setTimeout(function(){clickObj.attr('disabled', false);}, 5000);
                        jqXHR.abort();
                        requestCache[key] = new Date();
                    } else {
                        // 一時的狀態保持
                        requestCache[key] = new Date();
                        
                        // ajax結束時解除狀態
                        jqXHR.always(function () {
                           // delete ongoingRequests[options.url];
                        });
                    }
                }
                console.log('Ajax type:'+options.type.toLowerCase()+' url:'+key);
            });

            form = $('#form');

            //點擊送出
            $('#submit_button').click(function (){
                showConfirm('更新帳號權限資料，<br>大約需一小時，<br>更新完成將以Email通知，<br>確認送出?');
            });
            //點擊確認送出
            $('#modal-btn-si').click(function(){
                clickObj= $('#modal-btn-si');
                clickObj.attr('disabled', true);
                save();

                return false;
            });
        });

        function save()
        {
            showLoading();
            $.post(form.attr('action'), form.serializeArray(), function (response){
                hideLoading();
                setTimeout(function(){clickObj.attr('disabled', false);}, 1500);
                if(response.status == true){
                    notie.alert({type: 'success', text: response.message, time: 2});
                                            var mySubmitForm = document.createElement("FORM");
                        mySubmitForm.setAttribute("id", "mySubmitForm");
                        mySubmitForm.setAttribute("action", response.url);
                        document.body.appendChild(mySubmitForm);
                        mySubmitForm.submit();;
                    return false;
                }

                notie.alert({type: 'error', text: response.message, time: 2});
            }, 'json');
        }
    </script>
@endsection