@extends('adminlte::page')

@section('title', 'Freecia')

@section('content_header')
    <h1 xmlns="http://www.w3.org/1999/html">{{ $module_name }}</h1>
@stop

@section('content')
    <form method="POST" id="role-permission-form" action="{{ $action_url }}">
        {{ csrf_field() }}
        <div class="box">
            <div class="box-header">
                <div class="row form-group">


                    <div class="col-md-4">
                        <label>Role</label>
                        <select name="role_id" class="form-control select2 groups" required>
                            @include('admin.roles.permissions.partials.options',['options'=>$roles,])
                        </select>
                    </div>
                </div>
            </div>
            <div class="box-body" id="role-permission-placeholder" style="min-height: 600px;">
                @include('admin.roles.permissions.table',['rows'=>$rows, 'module_permissions',$module_permissions])
            </div>
            <div class="box-footer">
                @if($permissions['can_add'])
                    <input type="submit" class="btn btn-primary pull-right" value="Submit">
                @endif
            </div>
        </div>
    </form>
@stop

@section('javascript')
    <script>
        $(function () {
            init();
            $('.select2').select2();
            $('#role-permission-form').validate({
                rules: {
                    role_id: {
                        required: true
                    }
                },
                messages: {
                    role_id: {
                        required: 'Please select a role'
                    }
                }
            });

            $('.groups').select2().on('change', function () {
                $(this).valid();
                var roleID = $(this).val();
                $('.pace-activity').show();
                $.ajax({
                    url: '{{ route('role.permission.table') }}',
                    type: 'GET',
                    data: {role_id: roleID, '_token': '{{ csrf_token() }}'},
                    success: function (response) {
                        $('.pace-activity').hide();
                        $('#role-permission-placeholder').html(response.table);
                        init();
                    }
                });
            });

            $(document).on('submit', '#role-permission-form', function (e) {
                e.preventDefault();
                $('.pace-activity').show();

                var action = $(this).attr('action');
                var formData = $(this).serialize();

                $.ajax({
                    url: action,
                    data: formData,
                    type: "POST",
                    success: function (response) {
                        $('.pace-activity').hide();
                        toastr.success(response.message, '', {timeOut: 5000, 'positionClass': 'toast-bottom-right'})
                    }
                });


            });

            $(document).on('ifChecked', '.selectAllCHK', function (event) {
                $('.' + $(this).attr('checkbox-class')).iCheck('check');
            });

            $(document).on('ifUnchecked', '.selectAllCHK', function (event) {
                $('.' + $(this).attr('checkbox-class')).iCheck('uncheck');
            });

        });

        function init() {

            $('input.checkboxes').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        }
    </script>
@stop