<x-guest-layout>
    <form method="POST" action="{{ url('/register') }}">
        @csrf

        <!-- Name -->
        <div>
            <x-input-label for="name" :value="__('Name')" />
            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
            <x-input-error :messages="$errors->get('name')" class="mt-2" />
        </div>

        <!-- Email Address -->
        <div class="mt-4">
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />

            <x-text-input id="password" class="block mt-1 w-full"
                            type="password"
                            name="password"
                            required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Confirm Password -->
        <div class="mt-4">
            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />

            <x-text-input id="password_confirmation" class="block mt-1 w-full"
                            type="password"
                            name="password_confirmation" required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
        </div>

        <div class="flex items-center justify-end mt-4">
        
        <div class="space" id="but_permessi">
            <input id="button" type="button" onclick="mostra_permessi()" value="permessi" class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ms-4"></input>
            <div></div>
        </div>
            
        <div id="permessi" class="permessi">
                <div class="permesso">
                    <input type="checkbox" value="1" name="permissions[]">
                    <p>Creazione di nuovi utenti</p>
                </div>
                <div class="permesso">
                    <input type="checkbox" value="2" name="permissions[]">
                    <p>Creazione o rimozione di giorni nel calendario</p>
                </div>
                <div class="permesso">
                    <input type="checkbox" value="3" name="permissions[]">
                    <p>Possibilità di firmare la presenza(ingressi e uscite)</p>
                </div>                
                    <div class="permesso">
                    <input type="checkbox" value="4" name="permissions[]">
                    <p>Possibilità di validare le presenze</p>
                </div>

            </div>
    </div>
            <div class="space">
                <x-primary-button class="ms-4">
                    {{ __('Register') }}
                </x-primary-button>
            </div>
    </form>
</x-guest-layout>
