@extends('layouts.app')

@section('content')
<div class="container">
    <form method="POST" class="auth" action="{{ route('register') }}">
        @csrf

        <div class="titles">
            <h3>Regístrate</h3>
            <p>Regístrate con tu información para empezar a publicar.</p>
        </div>

        <div class="input">
            <label for="name" class="">Nombre completo</label>
            <input id="name" type="text" placeholder="Nombre completo" class="@error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autofocus>

            @error('name')
                <span class="invalid-feedback" role="alert">
                   {{ $message }}
                </span>
            @enderror
        </div>

        <div class="input">
            <label for="email" class="">Correo electrónico</label>
            <input id="email" type="email" placeholder="Correo electrónico" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" name="email"  autocomplete="email">

            @error('email')
                <span class="invalid-feedback" role="alert">
                    {{ $message }}
                </span>
            @enderror
        </div>

        <div class="input">
            <label for="password" class="">Contraseña</label>
            <div class="password">
                <input id="password" type="password" placeholder="Contraseña" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password">
                <svg fill="none" onclick="showPassword()" id="showPassword" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                <svg fill="none" stroke="currentColor" onclick="hidePassword()" id="hidePassword" style="display: none;" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"></path>
                </svg>
            </div>
            


            @error('password')
                <span class="invalid-feedback" role="alert">
                    {{ $message }}
                </span>
            @enderror
        </div>

        <div class="input">
            <label for="password-confirm" class="">Confirmar contraseña</label>
            <div class="password">
                <input id="password-confirm" type="password" placeholder="Confirmar contraseña" class="form-control" name="password_confirmation" autocomplete="new-password">
                <svg fill="none" onclick="showPasswordConfirm()" id="showPasswordConfirm" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                <svg fill="none" stroke="currentColor" onclick="hidePasswordConfirm()" id="hidePasswordConfirm" style="display: none;" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"></path>
                </svg>
            </div>
        </div>

        <button type="submit" class="btn-submit">
            Registrar
        </button>
        
        <div class="or">
            <div class="line"></div>
            o
            <div class="line"></div>
        </div>

        <a href="{{ route('login') }}">
            <button type="button" class="btn-border btn-submit">
                Iniciar sesión
            </button>
        </a>
    </form>
</div>
@endsection



@section('scripts')
    <script>
        function showPassword(){
            document.getElementById("password").type = "text";
            document.getElementById("showPassword").style.display = "none";
            document.getElementById("hidePassword").style.display = "block";
        }

        function hidePassword(){
            document.getElementById("password").type = "password";
            document.getElementById("showPassword").style.display = "block";
            document.getElementById("hidePassword").style.display = "none";
        }

        function showPasswordConfirm(){
            document.getElementById("password-confirm").type = "text";
            document.getElementById("showPasswordConfirm").style.display = "none";
            document.getElementById("hidePasswordConfirm").style.display = "block";
        }

        function hidePasswordConfirm(){
            document.getElementById("password-confirm").type = "password";
            document.getElementById("showPasswordConfirm").style.display = "block";
            document.getElementById("hidePasswordConfirm").style.display = "none";
        }
    </script>
@endsection