@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">Actualizar dados de <b>{{ $user->name }}</b></div>

                    <div class="card-body">
                        <form action="{{ route('utilizadores.update', ['utilizadore' => $user->id]) }}" method="POST">
                            @csrf
                            {{ method_field('PUT') }}

                            <div class="row">

                                <div class="col-md-4">
                                    <label for="">Função</label>
                                    @foreach($roles as $role)
                                        <div class="form-check">
                                            <input type="checkbox" name="roles[]" value="{{ $role->id }}"
                                                {{ $user->hasAnyRole($role->name)?'checked':'' }}>
                                            <label>{{ $role->description }}</label>
                                        </div>
                                    @endforeach                                  
                                </div>

                                <div class="col-md-4">
                                    <label for="">Nome</label>
                                    <input type="text" id="name" name="name" value="{{ $user->name }}" class="form-control"> 
                                </div>

                                <div class="col-md-4">
                                    <label for="">Email</label>
                                    <input type="email" id="email" name="email" value="{{ $user->email }}" class="form-control"> 
                                </div>

                                <div class="col-md-4">
                                    <label for="">Password</label>
                                    <input type="text" id="password" name="password" class="form-control"> 
                                </div>

                                <div class="col-md-4" hidden>
                                    <label for="">UserType</label>
                                    <input type="text" id="user_type" name="user_type" value="AppModelsUser" class="form-control">
                                </div>
                            </div>

                            <hr>
                            <button type="submit" class="btn btn-outline-success">
                                <i class="fa fa-edit"></i> Actualizar
                            </button>
                            <div class="pull-right">
                                <a class="btn btn-success" href="{{ url('utilizadores') }}"><i class="fa fa-home"></i> Voltar</a>
                            </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 previewFile() {
            var preview = document.getElementById("img_imagem");
            var file    = document.querySelector('input[type=file]').files[0];
            var reader  = new FileReader();

            reader.onloadend = function () {
                preview.src = reader.result;
            }

            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "";
            }
        }
    </script>
@endsection