@extends('adminlte::page')

@section('content_header')
    <h1>Usuário</h1>
    <label>{{ $data->id ? $data->nome : 'Novo usuário - SENHA: 123456' }}</label>
@endsection

@section('content')
    <div class="card" :json="[form.setData({{ $data }})]">
        <div class="card-body">
            <form @submit.prevent="$refs.submit.submit_form">

                <div class="row">
                    <div class="form-group col-md-6">
                        <label>Nome</label>
                        <input type="text" class="form-control" v-model="form.data.nome" required autofocus/>
                    </div>

                    <div class="form-group col-md-6">
                        <label>E-Mail</label>
                        <input type="email" class="form-control" v-model="form.data.email" maxlength="255" required/>
                    </div>

                    <div class="form-group col-md-6">
                        <label>Telefone</label>
                        <the-mask type="tel" :mask="['(##) ####-####','(##) #####-####']" class="form-control" v-model="form.data.telefone"></the-mask>
                    </div>

                    <div class="form-group col-md-6">
                        <label>Departamento</label>
                        <input type="text" class="form-control" v-model="form.data.departamento"/>
                    </div>

                    <div class="form-group col-12">
                        <label>Permissões</label>
                        <div class="row px-3">
                            @foreach ($permissoes as $permissao)
                            <div class="form-check col-md-4">
                                <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox" v-model="form.data.permissoes" value="{{ $permissao }}"> {{ $permissao }}
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="form-group col-12">
                        <label>Clientes com acesso</label>
                        <v-select class="form-control border-0 p-0" v-model="form.data.clientes_ids" multiple :reduce="cliente => cliente.code" :options='@json($clientes)'></v-select>
                        <small class="form-text text-muted">Usuários com permissão Admin têm acesso a todos os clientes automaticamente.</small>
                    </div>

                    <div class="form-group col-12">
                        <label>Status</label>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" v-model="form.data.ativo" value="1"> Ativo
                            </label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-secondary btn-block" onclick="history.back(-1)">Cancelar</button>
                    </div>
                    <div class="col-md-6">
                        <submit-btn ref="submit" url="{{ route('usuarios.store') }}" >Salvar</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection