@extends('layouts.app2')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Adicionar novo utilizador</div>

                <div class="card-body">

                    <form method="POST" action="{{ asset('utilizadores/store') }}" method="POST" role="form" enctype="multipart/form-data">
                        @csrf

                        {{--************************************ Informação de acesso ao sistema ******************************--}}
                            <p class="lead mb-0">Informação de acesso ao sistema</p>
                            <br>

                        <div class="row">
                            <div class="col-md-4">
                                <label for="name" class="">Nome</label> <label for="" style="color: red;">*</label>
                                <div class="">
                                    <input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" required autofocus>

                                    @if ($errors->has('name'))
                                        <span class="invalid-feedback" role="alert">
                                              <strong>{{ $errors->first('name') }}</strong>
                                          </span>
                                    @endif
                                </div>
                                <br>

                                
                                <label for="password" class="">Senha</label> <label for="" style="color: red;">*</label>
                                <div class="input-group mb-3">
                                    <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

                                    @if ($errors->has('password'))
                                        <span class="invalid-feedback" role="alert">
                                              <strong>{{ $errors->first('password') }}</strong>
                                          </span>
                                    @endif

                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fa fa-lock"></span> &nbsp;
                                            <input type="checkbox" onclick="myFunction()" data-target="tooltip" title="Visualizar a Senha de Acesso">
                                        </div>
                                    </div>
                                </div>
                                <br>



                            </div>
                            <div class="col-md-4">


                                <label for="email" class="">Email</label> <label for="" style="color: red;">*</label>
                                <div class="">
                                    <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>

                                    @if ($errors->has('email'))
                                        <span class="invalid-feedback" role="alert">
                                              <strong>{{ $errors->first('email') }}</strong>
                                          </span>
                                    @endif
                                </div>
                                <br>

                                <label for="password-confirm" class="">Confirmar Senha</label> <label for="" style="color: red;">*</label>
                                <div class="input-group mb-3">
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>

                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fa fa-lock"></span> &nbsp;
                                            <input type="checkbox" onclick="myFunction2()" data-target="tooltip" title="Visualizar a Senha de Acesso">
                                        </div>
                                    </div>
                                </div>



                                {{-- <label for="">Foto</label> <label for="" style="color: red;">*</label>
                                <input type="file" class="form-control" name="foto" required> --}}
                                {{-- <br> --}}

                            </div>
                            <div class="col-md-4">

                                <label for="">Função</label> <label for="" style="color: red;">*</label>
                                <select id="" name="role_id" class="form-control" required>
                                    <option value="">Selecione a Função</option>
                                    @foreach($role as $serv)
                                        <option value="{{$serv->id}}" data-target="tooltip" title="{{$serv->name}}">{{$serv->description}}</option>
                                    @endforeach
                                </select>
                                <br>
                            </div>
                        </div>

                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <hr>
                        <div class="">
                            <button type="submit" class="btn btn-success">
                                <i class="fa fa-send"></i> {{ __('Registar') }}
                            </button> &nbsp; <label for="" style="color: red;">*</label> Campos obrigatórios

                            <div class="pull-right">
                                <a class="btn btn-success" href="{{ route('utilizadores.index') }}"><i class="fa fa-home"></i> Voltar</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function myFunction(){
        var x = document.getElementById("password");

        if(x.type === "password"){
            x.type = "text";
        }else{
            x.type = "password";
        }
    }

    function myFunction2(){
        var x = document.getElementById("password-confirm");

        if(x.type === "password"){
            x.type = "text";
        }else{
            x.type = "password";
        }
    }
</script>
@endsection