@extends('layouts.login')

@section('browserTitle', 'Login')

@section('title')
{{ trans('login.login') }}
@endsection

@section('subtitle')
{{ trans('login.initMsg') }}

@if(isset($message))
<div class="container-fluid">
    <div class="alert alert-success" role="alert">
        {{ $message }}
    </div>
</div>
@endif
@endsection

@section('body')
<script type="text/javascript">
    $(document).ready(function() {
        // Controlli login
        $("#login-form").submit(function(event) {
            // Ottenere i valori dei campi email e password
            var email = $("input[name='email']").val();
            var password = $("input[name='password']").val();
            var error = false;
            
            // Verifica se il campo "password" è vuoto
            if (password.trim() === "") {
                error = true;
                const pw = __("login.password").toLowerCase();
                $("#invalid-password").text(__("msg.requiredField", {field: pw}));
                event.preventDefault(); // Impedisce l'invio del modulo
                $("input[name='password']").focus();
            } else {
                $("#invalid-password").text("");
            }

            // Verifica se il campo "email" è vuoto
            if (email.trim() === "") {
                error = true;
                const em = __("login.email").toLowerCase();
                $("#invalid-email").text(__("msg.requiredField", {field: em}));
                event.preventDefault(); // Impedisce l'invio del modulo
                $("input[name='email']").focus();
            } else {
                $("#invalid-email").text("");
            } 
        });

        // Controlli registrazione
        $("#register-form").submit(function(event) {
            // Ottengo i valori dei campi
            var firstname = $("input[name='firstname']").val();
            var lastname = $("input[name='lastname']").val();
            var regEmail = $("input[name='regEmail']").val();
            var regPassword = $("input[name='regPassword']").val();
            var confirmPassword = $("input[name='confirmPassword']").val();
            var passwordRegex = /^(?=.*[0-9])(?=.*[!-\*\[\]\$&\/]).{8,}$/;
            var error = false;

            // Verifica se il campo "confirmpassword" è vuoto
            if (confirmPassword.trim() === "") {
                error = true;
                const cpw = __("login.rePassword").toLowerCase();
                $("#invalid-confirmPassword").text(__("msg.requiredField", {field: cpw}));
                event.preventDefault(); // Impedisce l'invio del modulo
                $("input[name='confirmPassword']").focus();
            } else {
                $("#invalid-confirmPassword").text("");
            }

            // Verifica se il campo "regpassword" è vuoto o non rispetta la regex
            if (regPassword.trim() === "") {
                error = true;
                const pw = __("login.password").toLowerCase();
                $("#invalid-regPassword").text(__("msg.requiredField", {field: pw}));
                event.preventDefault(); // Impedisce l'invio del modulo
                $("input[name='regPassword']").focus();
            } else if(!passwordRegex.test(regPassword)) {
                error = true;
                $("#invalid-regPassword").text(__("msg.invalidPassword"));
                event.preventDefault(); // Impedisce l'invio del modulo
                $("input[name='regPassword']").focus();
            } else {
                $("#invalid-regPassword").text("");
            }

            // Verifica se il campo "regemail" è vuoto
            if (regEmail.trim() === "") {
                error = true;
                const em = __("login.email").toLowerCase();
                $("#invalid-regEmail").text(__("msg.requiredField", {field: em}));
                event.preventDefault(); // Impedisce l'invio del modulo
                $("input[name='regEmail']").focus();
            } else {
                $("#invalid-regEmail").text("");
            }

            // Verifica se il campo "lastname" è vuoto
            if (lastname.trim() === "") {
                error = true;
                const ln = __("login.lastname").toLowerCase();
                $("#invalid-lastname").text(__("msg.requiredField", {field: ln}));
                event.preventDefault(); // Impedisce l'invio del modulo
                $("input[name='lastname']").focus();
            } else {
                $("#invalid-lastname").text("");
            }

            // Verifica se il campo "firstname" è vuoto
            if (firstname.trim() === "") {
                error = true;
                const fn = __("login.firstname").toLowerCase();
                $("#invalid-firstname").text(__("msg.requiredField", {field: fn}));
                event.preventDefault(); // Impedisce l'invio del modulo
                $("input[name='firstname']").focus();
            } else {
                $("#invalid-firstname").text("");
            }


            // Controllo mail univoca
            if(!error) {
                if(confirmPassword.trim() !== regPassword.trim())
                {
                    error = true;
                    $("#invalid-confirmPassword").text(__("msg.passwordMismatch"));
                    event.preventDefault();
                    $("input[name='confirmPassword']").focus();
                } else {
                    $("#invalid-confirmPassword").text("");
                } 

                if(!error) {
                event.preventDefault(); // Impedisce preventivamente l'invio del modulo prima del controllo
                $.ajax({
                    type: 'GET',

                    url: '/ajaxUser',

                    data: {email: regEmail.trim()},

                    success: function (data) {
                        if (data.found)
                        {
                            error = true;
                            $("#invalid-regEmail").text(__("msg.emailExists"));
                            $("input[name='regEmail']").focus();
                        } else {
                            $("form")[1].submit();
                        }
                    }
                });
            }
            }
            
        });
    });
</script>



<div class="container-fluid">
    <div class="row">
        <div>
            <ul class="nav nav-tabs mb-3 justify-content">
                <li class="nav-item">
                    <a class="nav-link fw-semibold active" 
                        style="color: #003049 !important" data-bs-toggle="tab" href="#login-tab"><b>{{ trans('btn.login') }}</b></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link fw-semibold" id="btn-register"
                        style="color: #003049 !important" data-bs-toggle="tab" href="#register-tab"><b>{{ trans('btn.register') }}</b></a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Login -->
    <div class="row">
        <div class="tab-content">
            <div class="tab-pane active" id="login-tab">
                <form id="login-form" action="{{ route('user.login') }}" method="post">
                    @csrf <!- Security token ->
                    <div class="form-group mb-3">
                        <label style="color: #003049" class="form-label"><b>{{ trans('login.email') }}</b></label>
                        <input type="username" class="form-control" name="email" placeholder="{{ trans('login.mailEx') }}">
                        <span class="invalid-input" id="invalid-email"></span>
                    </div>
                        
                    <div class="form-group mb-3">
                        <label style="color: #003049" class="form-label"><b>{{ trans('login.password') }}</b></label>
                        <input type="password" class="form-control" name="password" placeholder="{{ trans('login.password') }}">
                        <span class="invalid-input" id="invalid-password"></span>
                    </div>

                    <div class="form-group text-center mb-3">
                        <label for="login-submit" class="my-btn my-blue-btn w-100">{{ trans('login.login') }}</label>
                        <input id="login-submit" class="d-none" type="submit" value="{{ trans('btn.login') }}">
                    </div>
                </form>
            </div>

            <!-- Register -->
            <div class="tab-pane" id="register-tab">
                <form id="register-form" action="{{ route('user.register') }}" method="post">
                    @csrf
                    <div class="form-group mb-3">
                        <label class="form-label"><b>{{ trans('login.firstname') }}</b></label>
                        <input type="text" name="firstname" class="form-control" placeholder="{{ trans('login.firstname') }}"/>
                        <span class="invalid-input" id="invalid-firstname"></span>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label"><b>{{ trans('login.lastname') }}</b></label>
                        <input type="text" name="lastname" class="form-control" placeholder="{{ trans('login.lastname') }}"/>
                        <span class="invalid-input" id="invalid-lastname"></span>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label"><b>{{ trans('login.role') }}</b></label>
                        <select class="form-control form-select" name="{{ trans('login.role') }}">
                            <option value="patient" selected="selected">{{ trans('login.patient') }}</option>
                            <option value="clinician">{{ trans('login.clinician') }}</option>
                        </select>
                        <span class="invalid-input" id="invalid-role"></span> 
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label"><b>{{ trans('login.email') }}</b></label>
                        <input type="text" name="regEmail" class="form-control" placeholder="{{ trans('login.mailEx') }}"/>
                        <span class="invalid-input" id="invalid-regEmail"></span>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label"><b>{{ trans('login.password') }}</b></label>
                        <input type="password" name="regPassword" class="form-control" placeholder="{{ trans('login.password') }}"/>
                        <span class="invalid-input" id="invalid-regPassword"></span>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label"><b>{{ trans('login.rePassword') }}</b></label>
                        <input type="password" name="confirmPassword" class="form-control" placeholder="{{ trans('login.password') }}"/>
                        <span class="invalid-input" id="invalid-confirmPassword"></span>
                    </div>

                    <div class="form-group text-center mb-3">
                        <label for="register-submit" class="my-btn my-blue-btn w-100">{{ trans('btn.register') }}</label>
                        <input id="register-submit" class="d-none" type="submit" value="Register">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
<p class="text-center fs-5">
    <br>{{ trans('login.exitMsg') }}<br>
    
    <a href="{{ route('home') }}" class="link-primary link-offset-2 link-underline link-underline-opacity-75 fw-semibold" style="color: #065fad !important">Homepage</a>
</p>
@endsection