<form action="" method="post" onsubmit="animateSpinner('add')">
    {{ formToken() }}
    <input type="hidden" name="action" value="edit-rules"/>
    <input type="hidden" name="activetab" value="{{ fsc.getCurrentView().getViewName() }}"/>
    <div class="card shadow">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col"></div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-sm btn-outline-primary btn-spin-action">
                        <i class="fa-solid fa-save fa-fw"></i> {{ trans('save') }}
                    </button>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                <tr class="align-middle">
                    <th>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fa-solid fa-search"></i>
                            </span>
                            <input type="text" class="form-control" id="filter-resource"
                                   placeholder="{{ trans('search') }}"/>
                        </div>
                    </th>
                    <th class="text-center">{{ trans('allow-get-data') }}</th>
                    <th class="text-center">{{ trans('allow-post-data') }}</th>
                    <th class="text-center">{{ trans('allow-put-data') }}</th>
                    <th class="text-center">{{ trans('allow-delete-data') }}</th>
                </tr>
                </thead>
                <tbody>
                <tr class="table-warning">
                    <td>
                        <b>{{ trans('all') }}</b>
                    </td>
                    <td>
                        <div class="form-check d-flex justify-content-center">
                            <input class="all-permission form-check-input" id="checkbox-all-allowget" value="allowget"
                                   type="checkbox"/>
                        </div>
                    </td>
                    <td class="text-center">
                        <div class="form-check d-flex justify-content-center">
                            <input class="all-permission form-check-input" id="checkbox-all-allowpost" value="allowpost"
                                   type="checkbox"/>
                        </div>
                    </td>
                    <td>
                        <div class="form-check d-flex justify-content-center">
                            <input class="all-permission form-check-input" id="checkbox-all-allowput" value="allowput"
                                   type="checkbox"/>
                        </div>
                    </td>
                    <td>
                        <div class="form-check d-flex justify-content-center">
                            <input class="all-permission form-check-input" id="checkbox-all-allowdelete" value="allowdelete"
                                   type="checkbox"/>
                        </div>
                    </td>
                </tr>
                {% for resource, rule in fsc.getAccessRules() %}
                    <tr>
                        <td>{{ resource }}</td>
                        <td>
                            <div class="form-check d-flex justify-content-center">
                                {% if rule.allowget %}
                                    <input type="checkbox" name="allowget[]" value="{{ resource }}"
                                           class="form-check-input" checked/>
                                {% else %}
                                    <input type="checkbox" name="allowget[]" value="{{ resource }}"
                                           class="form-check-input"/>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            <div class="form-check d-flex justify-content-center">
                                {% if rule.allowpost %}
                                    <input type="checkbox" name="allowpost[]" value="{{ resource }}"
                                           class="form-check-input" checked/>
                                {% else %}
                                    <input type="checkbox" name="allowpost[]" value="{{ resource }}"
                                           class="form-check-input"/>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            <div class="form-check d-flex justify-content-center">
                                {% if rule.allowput %}
                                    <input type="checkbox" name="allowput[]" value="{{ resource }}"
                                           class="form-check-input" checked/>
                                {% else %}
                                    <input type="checkbox" name="allowput[]" value="{{ resource }}"
                                           class="form-check-input"/>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            <div class="form-check d-flex justify-content-center">
                                {% if rule.allowdelete %}
                                    <input type="checkbox" name="allowdelete[]" value="{{ resource }}"
                                           class="form-check-input" checked/>
                                {% else %}
                                    <input type="checkbox" name="allowdelete[]" value="{{ resource }}"
                                           class="form-check-input"/>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr class="table-warning">
                        <td colspan="5">{{ trans('no-data') }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="card-body text-end">
            <button type="submit" class="btn btn-primary btn-spin-action">
                <i class="fa-solid fa-save fa-fw"></i> {{ trans('save') }}
            </button>
        </div>
    </div>
</form>

<script>
    $(document).ready(function () {
        // Todos
        $('input[type="checkbox"].all-permission').change(function () {
            var isChecked = $(this).is(':checked');
            var permissionType = $(this).val();

            $('input[type="checkbox"][name="' + permissionType + '[]"]').prop('checked', isChecked);
        });

        // Filtrar recursos
        $('#filter-resource').on('keyup', function () {
            var value = $(this).val().toLowerCase();
            $('table tbody tr').each(function () {
                var resourceName = $(this).find('td:first').text().toLowerCase();
                if (resourceName.indexOf(value) > -1 || $(this).find('td:first b').length > 0) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });
</script>