@extends('template.index')
@section('title','Adicionar Grupo')
@section('content')
    {{-- {{ dd($errors->all()) }} --}}

    <style>
        .bold {
            font-weight: bold;
        }
    </style>

    <main class="book-form">
        <div class="container-fluid">
            <div class="row justify-content-center mt-5">
                <div class="container-fluid">
                    <!-- INCIO CARD CRIAR PERMISSAO -->
                    <div class="row mt-5">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row ml-1">
                                        <h2 class="bold">
                                            Cadastrar Grupo
                                        </h2>
                                    </div>
                                    <div class="mt-2" style="border-bottom: 1px dotted #CCC"></div>
                                    <div class="flex text-right mr-5 mt-3 mb-3">
                                        <div class="btn-group" role="group">
                                            <a class="btn btn-primary btn-sm" href="{{ route('group.index') }}"
                                                role="button">
                                                <i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp; VOLTAR
                                            </a>
                                        </div>
                                    </div>
                                    <x-erro :message="$errors->all()" />
                                    <x-sucesso message="{{ session('success') }}" />
                                    <form action="{{ route('group.store') }}" method="post">
                                        @csrf
                                        <div class="group">
                                            <div class="row">
                                                <div class="col-12 col-md-6">
                                                    <div class="form-group">
                                                        <b>Nome:</b>
                                                        <input type="text" class="form-control" name="name"
                                                            maxlength="191" required>
                                                        <span class="error-validate">
                                                            <p id="validate-name"></p>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-6">
                                                    <div class="form-group">
                                                        <b>Descrição:</b>
                                                        <input type="text" class="form-control" name="description"
                                                            maxlength="191" required>
                                                        <span class="error-validate">
                                                            <p id="validate-name"></p>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="permission">
                                            <div class="row ml-1">
                                                <h4 class="bold">
                                                    Permissões
                                                </h4>
                                            </div>
                                            <hr style="margin-top: -5px;">
                                            <div class="row">
                                                <div class="col-12 col-md-6">
                                                    <div class="form-group">
                                                        <select class="productGroup" multiple="multiple" id="productGroup"
                                                            name="permissions[]">
                                                            @foreach ($permission as $value)
                                                                @php
                                                                    $data_parent = $value->idFather > 0 ? "data-parent={$value->idFather}" : '';
                                                                    $selected = in_array($value->id, $groupPermission) ? 'selected' : '';
                                                                @endphp
                                                                <option value="{{ $value->id }}"
                                                                    {{ $data_parent . ' ' . $selected }}>
                                                                    {{ $value->controller . ' - ' . $value->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex text-left mt-3 ml-3">
                                            <div class="btn-group" role="group">
                                                <button class="btn btn-primary btn-sm text-white" type="submit"
                                                    role="button">
                                                    <i class="fa fa-save" aria-hidden="true"></i>&nbsp;&nbsp; SALVAR
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- FIM CARD CRIAR PERMISSAO -->
                </div>
            </div>
        </div>
    </main>
@endsection

@section('js')
    <script src="{{ asset('js/jquery.bootstrap.treeselect.js?v=1.0.0') }}"></script>
    <link rel="stylesheet" href="{{ asset('css/treeselect.css?v=1.0.0') }}">

    <script>
        $(document).ready(function() {
            $('.productGroup').treeselect();
        });
    </script>
@endsection