@extends('layouts.app')

@section('content')
<main class="sm:container sm:mx-auto sm:max-w-lg sm:mt-10">
    <div class="flex">
        <div class="w-full">
            <section class="flex flex-col break-words bg-white sm:border-1 sm:rounded-md sm:shadow-lg">

                <header class="font-semibold bg-gray-200 text-gray-700 py-5 px-6 sm:py-6 sm:px-8 sm:rounded-t-md">
                    {{ __('Registrar') }}

                </header>

                <form class="w-full px-6 space-y-6 sm:px-10 sm:space-y-8" method="POST"
                    action="{{ route('register') }}">
                    @csrf

                    <div class="flex flex-wrap">
                        <label for="name" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
                            {{ __('Nome') }}:
                        </label>

                        <input id="name" type="text" class="py-2 px-1 form-input w-full border border-gray-500 @error('name')  border-red-500 @enderror"
                            name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                        @error('name')
                        <p class="text-red-500 text-xs italic mt-4">
                            {{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="flex flex-wrap">
                        <label for="email" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
                            {{ __('Endereço de E-Mail') }}:
                        </label>

                        <input id="email" type="email"
                            class="py-2 px-1 form-input w-full border border-gray-500 @error('email') border-red-500 @enderror" name="email"
                            value="{{ old('email') }}" required autocomplete="email">

                        @error('email')
                        <p class="text-red-500 text-xs italic mt-4">
                            {{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="flex flex-wrap">
                        <label for="password" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
                            {{ __('Senha') }}:
                        </label>

                        <input id="password" type="password"
                            class="py-2 px-1 form-input w-full border border-gray-500 @error('password') border-red-500 @enderror" name="password"
                            required autocomplete="new-password">

                        @error('password')
                        <p class="text-red-500 text-xs italic mt-4">
                            {{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="flex flex-wrap">
                        <label for="password-confirm" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
                            {{ __('Confirme Sua Senha') }}:
                        </label>

                        <input id="password-confirm" type="password" class="form-input w-full py-2 px-1 border border-gray-500"
                            name="password_confirmation" required autocomplete="new-password">
                    </div>

                    <div class="flex flex-wrap">
                        <label for="setores" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
                            {{ __('Setor') }}:
                        </label>
                        <select class="w-full p-2 border border-gray-500" name="setor" id="setores" onchange="checkvalue()" required>
                            <option value="">Selecione o Setor</option>
                            <option value="create">Criar um novo</option>
                            @foreach ($setores as $setor)
                            <option value="{{$setor->id}}">{{$setor->nome}}</option>
                            @endforeach
                        </select>

                        <input type="text" name="create_setor" id="create_setor" class="hidden w-full mt-2 py-2 px-1" placeholder="Digite o nome do setor" value='none' />
                    </div>

                    <div class="flex flex-wrap pb-8">
                        <button type="submit"
                            class="w-full select-none font-bold whitespace-no-wrap p-3 rounded-lg text-base leading-normal no-underline text-white hover:bg-blue-700 sm:py-4" style="background-color: #071D41;">
                            {{ __('Registrar') }}
                        </button>

                        {{-- <p class="w-full text-xs text-center text-gray-700 my-6 sm:text-sm sm:my-8">
                            {{ __('Já Possui Uma Conta?') }}
                            <a class="text-blue-500 hover:text-blue-700 no-underline hover:underline" href="{{ route('login') }}">
                                {{ __('Logar') }}
                            </a>
                        </p> --}}
                    </div>
                </form>

            </section>
        </div>
    </div>
</main>
<script>
    function checkvalue(){
        const create = document.getElementById('setores').value === 'create'
        const createSetor = document.getElementById('create_setor')

        if(create) {
            createSetor.value=""
            return createSetor.style.display= "block"
        }
        createSetor.value="none"
        return createSetor.style.display= "none"
    }
</script>
@endsection