@extends('template.index')
@section('title','Adicionar Usuário')
@section('content')
    <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 Usuário
                                        </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('users.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('users.store') }}" method="post">
                                        @csrf
                                        <div class="group">
                                            <div class="row">
                                                <div class="col-12 col-md-4">
                                                    <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-4">
                                                    <div class="form-group">
                                                        <b>E-mail:</b>
                                                        <input type="text" class="form-control" name="email"
                                                            maxlength="100" required>
                                                        <span class="error-validate">
                                                            <p id="validate-name"></p>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-4">
                                                    <div class="form-group">
                                                        <b>Senha:</b>
                                                        <input type="password" class="form-control" name="password"
                                                            maxlength="9" 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>
                                        </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