@extends('adminlte::page')
@section('plugins.iCheck', true)
@section('title', 'Crear Rol')

@section('content_header')
    <a class="btn btn-dark btn" href="javascript:history.back()"><i class="fas fa-solid fa-arrow-left"></i> REGRESAR</a>
@stop

@section('content')
    <div class="container" style="width: 100%">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title font-weight-bold">Nuevo Rol</h3>
            </div>

            <div class="card-body">
                <x-validation-errors class="mb-4" />
                <form data-action="{{ route('role.store') }}" method="POST" id="roleForm">
                    @csrf
                    <div class="form-group">
                        <label for="inputName">Nombre:</label>
                        <input type="text" id="name_id" class="form-control" name="name">
                    </div>
                    @foreach ($sections as $key => $section)
                        <div id="accordion" class="m-1">
                            <div class="card card-dark">
                                <div class="card-header">
                                    <h4 class="card-title w-100">
                                        <a class="d-block w-100" data-toggle="collapse" href="#collapse{{ $key }}">
                                            {{ $section->section }}
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapse{{ $key }}" class="collapse" data-parent="#accordion">
                                    <div class="card-body">
                                        @foreach ($permissions as $permission)
                                            @continue($permission->section != $section->section)
                                            <div class="icheck-primary">
                                                <input type="checkbox" name="permissions[]" value="{{ $permission->id }}"
                                                    id="{{ $permission->name }}Id" />
                                                <label
                                                    for="{{ $permission->name }}Id">{{ $permission->description }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <button type="submit" class="btn btn-primary float-right">REGISTRAR</button>
                </form>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
@stop


@section('js')
<script>
    var uri = "{{ route('validate.rol') }}"
</script>
    <script src="/js/role/form.js"></script>
    <script src="/js/general/sweet.js"></script>
@stop