@extends('../layouts.navigation')
@section('content')
    <form class="form-valide" method="POST" action="{{route('usuario.create')}}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="quantidade" value="0">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="app-ecommerce">
                <!-- Add Product -->
                <div
                    class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
                    <div class="d-flex flex-column justify-content-center">
                        <h4 class="mb-1">Adicionar um Novo Usuário</h4>
                        
                    </div>
                    <div class="d-flex align-content-center flex-wrap gap-4">
                        <div class="d-flex gap-4">
                            <button type="reset" class="btn btn-label-secondary">Descartar</button>
                            <!-- button class="btn btn-label-primary">Salvar rascunho</button-->
                        </div>
                        <button type="submit" class="btn btn-primary">Salvar</button>
                    </div>
                </div>
                @if (session('status'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('status') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                <div class="row">
                    <!-- First column-->
                    <div class="col-12 col-lg-5">
                        <!-- Product Information -->
                        <div class="card mb-6">
                            <div class="card-header">
                                <h5 class="card-tile mb-0">Informações do Usuário</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-6 ">
                                    <label class="form-label" for="name">Nome de Usuário *</label>
                                    <input required maxlength="150" type="text" class="form-control" id="name"
                                        placeholder="Nome do Usuário" name="name" aria-label="Nome do Usuário" value="{{old('name')}}">
                                        @error('name')
                                        <div class="alert alert-danger bg-danger text-light border-0 alert-dismissible fade show" role="alert">
                                            {{ $message }}
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                                        </div>
                                        @enderror    
                                </div>
                                <div class="mb-6">
                                    <div class="col"> 
                                        <label class="form-label" for="email">Endereço de Email *</label>
                                        <input type="email" class="form-control" id="email"
                                            placeholder="Endereço de Email" name="email"
                                            aria-label="Endereço de Email" value="{{old('email')}}" >
                                            @error('email')
                                                <div class="alert alert-danger bg-danger text-light border-0 alert-dismissible fade show" role="alert">
                                                    {{ $message }}
                                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                                                </div>
                                            @enderror 
                                    </div>
                                    
                                </div>
                                <div class="mb-6">
                                    <label class="form-label" for="password">Palavra Passe *</label>
                                    <input type="password" class="form-control" id="password"
                                        placeholder="Palavra Passe" name="password" aria-label="Palavra Passe" 
                                        value="{{old('password')}}">
                                        @error('password')
                                        <div class="alert alert-danger bg-danger text-light border-0 alert-dismissible fade show" role="alert">
                                            {{ $message }}
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                                        </div>
                                        @enderror 
                                </div>
                                <div class="mb-6">
                                    <label class="form-label" for="password_confirmation">Palavra Passe *</label>
                                    <input type="password" class="form-control" id="password_confirmation"
                                        placeholder="Palavra Passe" name="password_confirmation" aria-label="Palavra Passe" 
                                        value="{{old('password_confirmation')}}">
                                </div>
                                <div class="mb-6 ">
                                    <label class="form-label" for="tipo">Tipo de Usuário *</label>
                                    <select id="tipo" name="tipo" class="select2 form-select"
                                        data-placeholder="Seleccione Uma opção" value="{{ old('tipo') }}">
                                       @foreach ($tipos as $tipo)
                                           <option value="{{ $tipo->id }}">{{ $tipo->tipo }}</option>
                                       @endforeach
                                        
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- /Product Information -->
                        
                        
                    
                    </div>
                    <!-- /Second column -->
                    <!-- First column-->
                    <div class="col-12 col-lg-7">
                        <!-- Product Information -->
                        <div class="card mb-6">
                            <div class="card-header">
                                <h5 class="card-tile mb-0">Permissões</h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group row">
                                    <h5 class="card-tile mb-0"> 
                                        <div class="form-check ms-2 mt-2 mb-4">
                                            <input onchange="AllCliqued()" class="form-check-input" type="checkbox" value="" id="permission_all">
                                            <label class="switch-label" for="price-charge-tax">Todas Permissões</label>
                                        </div>
                                        <script>
                                                var x = document.getElementById("permission_all");
                                                function AllCliqued(){
                                                    var arrayItem = document.getElementsByClassName("permissao_check");
                                                    for (let index = 0; index < arrayItem.length; index++) {
                                                            const element = arrayItem[index];
                                                            element.checked=x.checked;
                                                    }
                                                }

                                        </script>
                                    </h5>
                                    @php
                                        $index=0;
                                    @endphp
                                    @foreach ( $permissoes as $perm)
                                        <div class="col-lg-6">
                                            <div class="form-check ms-2 mt-2 mb-4">
                                                <input class="form-check-input permissao_check" type="checkbox" value="{{ $perm->id }}" name="permission[{{ $index++ }}]" id="permission_{{ $perm->id }}"
                                                    >
                                                <label class="switch-label" for="price-charge-tax">{{ $perm->permission }}</label>
                                            </div>
                                        </div>  
                                    @endforeach
                                    
                                    
                                </div>
                            </div>
                        </div>
                        <!-- /Product Information -->
                        
                        
                    
                    </div>
                    <!-- /Second column -->
                </div>
            </div>
        </div>
        <!-- / Content -->
    </form>
@endsection