@extends('site.layouts.app')
@section('content')

<div class="page-wrapper content-wrapper page-register header-colorfull">
    <section class="register">
        <div class="container">
            <div class="register__box">
                <div class="register__title">
                    <h2>Cadastre-se</h2>
                    <p>Preencha os seus dados.</p>
                </div>
                <form method="POST" action="{{ route('client.register.store') }}">
                    @csrf
                    <div class="field">
                        <label for="name">Nome Completo<span>*</span></label>
                        <input type="text" name="name" id="name">
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="field">
                        <label for="email">E-mail<span>*</span></label>
                        <input type="text" name="email" id="email">
                        @error('email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="field-duo">
                        <div class="field">
                            <label for="phone">Telefone<span>*</span></label>
                            <input type="text" name="phone" id="phone">
                            @error('phone')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="field">
                            <label for="cpf">CPF<span>*</span></label>
                            <input type="text" name="cpf" id="cpf">
                            @error('cpf')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <span class="divider"></span>

                    <div class="field-select">
                        <div class="strong-label">
                            <label for="category">Categoria</label>
                        </div>
                        <select name="category" id="category">
                            <option value="">Selecione uma categoria</option>
                            <option value="clientech">Clientech</option>
                            <option value="obratech">Obratech</option>
                            <option value="juristech">Juristech</option>
                            <option value="lecitech">Lecitech</option>
                        </select>
                        @error('category')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <span class="divider"></span>

                    <div class="field-duo">
                        <div class="field">
                            <label for="password">Senha<span>*</span></label>
                            <input type="password" name="password" >
                            @error('password')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="field">
                            <label for="password">Confirme sua senha<span>*</span></label>
                            <input type="password" name="password_confirmation">
                        </div>
                    </div>

                    <div class="field-checkbox">
                        <input type="checkbox" name="terms_accepted" id="terms" value="1">
                        <label for="terms">Li e aceito os <a href="#">Termos de uso</a> e <a href="#">Política de privacidade</a></label>

                    </div>
                    @error('terms_accepted')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <input type="submit" value="Cadastrar">
                </form>
            </div>
        </div>
    </section>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
  $(function () {
    $('#cpf').mask('000.000.000-00', { reverse: true });
  });
</script>
@endsection