@section('title', config('app.name'))

@section('metatags')
    <meta name="description" content="">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="{{ trans('seo.og-image.url') }}">
    <meta property="og:image:width" content="{{ trans('seo.og-image.width') }}">
    <meta property="og:image:height" content="{{ trans('seo.og-image.height') }}">
    <meta name="robots" content="index, follow">
@stop

@section('content')
    <style>
        .form-group.is-required > label:after,
        .label-required:after {
            color: #ff0000;
            vertical-align: super;
            font-size: 70%;
            margin-top: -1px;
            content: " *";
            text-shadow: 0 0 2px #a70000;
            position: absolute;
        }

        .invalid-feedback {
            display: block;
            color: #dc3545;
            margin-top: 0.25rem;
            font-size: 0.875rem;
            width: 100%;
            margin-left: 0;
            font-weight: 400;
            line-height: 1.5;
        }

        .btn-show-pass {
            font-size: 15px;
            color: #999999;
            display: flex;
            align-items: center;
            position: absolute;
            height: 100%;
            top: 12px;
            right: 10px;
            padding-right: 5px;
            cursor: pointer;
            transition: all 0.4s;
            vertical-align: central;
        }
        .zmdi-eye {
            font-size: 115%;
        }

        .btn-show-pass:hover,
        .btn-show-pass.active {
            color: #ff7f04;
        }

        .position-relative {
            position: relative;
        }
    </style>

    <div class="container-fluid d-flex flex-wrap flex-column justify-content-center" style="background-image: url('assets/img/register.jpg'); background-size: 100% 100%; background-repeat: no-repeat; min-height: calc(100vh - 150px); margin-top: 60px">
        <h1 class="mb-5" style="color:white; font-weight: bold; font-size: xx-large;">Faça aqui o seu registo</h1>
        <form method="POST" action="{{ route('register') }}" id="registerForm">
            @csrf
            <div class="row">
                <div class="col-2 col-lg-4">
                    &nbsp;
                </div>
                <div class="col-8 col-lg-4 py-3" style="border: 1px solid black; border-radius: 10px; background:#E4E4E4">

                    <div class="form-group is-required">
                        <label for="name">Nome da Empresa</label>
                        <input id="name" type="text" class="form-control required" name="name" placeholder="Indique o nome da empresa"value="{{ old('name') }}" required autofocus>
                        <div class="invalid-feedback" id="name-feedback"></div>
                    </div>

                    <div class="form-group is-required">
                        <label for="email">Email</label>
                        <input id="email" type="email" class="form-control required" placeholder="Indique o endereço de email" name="email" value="{{ old('email') }}" required>
                        <div class="invalid-feedback" id="email-feedback"></div>
                    </div>

                    <div class="form-group is-required position-relative">
                        <label for="password">Password</label>
                        <input id="password" type="password" placeholder="Indique a password" class="form-control required" name="password" required autocomplete="new-password">
                        <span class="btn-show-pass">
                        <i class="zmdi zmdi-eye"></i>
                    </span>
                        <div class="invalid-feedback" id="password-feedback"></div>
                    </div>

                    <div class="form-group is-required position-relative">
                        <label for="password-confirm">Confirmar Password</label>
                        <input id="password-confirm" type="password" placeholder="Confirme a password" class="form-control required" name="password_confirmation" required autocomplete="new-password">
                        <span class="btn-show-pass">
                        <i class="zmdi zmdi-eye"></i>
                    </span>
                        <div class="invalid-feedback" id="password-confirm-feedback"></div>
                    </div>

                    <button type="submit" class="btn btn-primary float-right">Registar</button>
                </div>
                <div class="col-2 col-lg-4">
                    &nbsp;
                </div>
            </div>
        </form>
    </div>
@stop

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const registerForm = document.getElementById('registerForm');
            registerForm.addEventListener('submit', function (event) {
                let valid = true;

                const name = document.getElementById('name');
                const nameFeedback = document.getElementById('name-feedback');
                if (name.value.length < 8 || name.value.length > 20) {
                    nameFeedback.textContent = 'O nome da empresa deve ter entre 8 e 20 caracteres.';
                    valid = false;
                } else {
                    nameFeedback.textContent = '';
                }

                const password = document.getElementById('password');
                const passwordConfirm = document.getElementById('password-confirm');
                const passwordFeedback = document.getElementById('password-feedback');
                const passwordConfirmFeedback = document.getElementById('password-confirm-feedback');

                if (password.value.length < 8 || password.value.length > 20) {
                    passwordFeedback.textContent = 'A password deve ter entre 8 e 20 caracteres.';
                    valid = false;
                } else {
                    passwordFeedback.textContent = '';
                }

                if (password.value !== passwordConfirm.value) {
                    passwordConfirmFeedback.textContent = 'As passwords não correspondem.';
                    valid = false;
                } else {
                    passwordConfirmFeedback.textContent = '';
                }

                if (!valid) {
                    event.preventDefault();
                }
            });

            const showPassBtns = document.querySelectorAll('.btn-show-pass');
            showPassBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    const input = btn.previousElementSibling;
                    if (input.type === 'password') {
                        input.type = 'text';
                        btn.innerHTML = '<i class="zmdi zmdi-eye-off"></i>';
                    } else {
                        input.type = 'password';
                        btn.innerHTML = '<i class="zmdi zmdi-eye"></i>';
                    }
                });
            });
        });
    </script>

@stop