@extends('layouts.login')

@section('browserTitle', 'Login')

@section('title')
Login
@endsection

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

@section('body')
<script type="text/javascript">
    $(document).ready(function() {
        $("#btn-register").click(function() {
            alert(__("login.unavailableReg"));
        });
        $("#register-submit").click(function(event) {
            event.preventDefault();
            alert(__("login.unavailableReg"));
        });
        
        // 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("");
            } 
        });
    });
</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('login.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 disabled type="text" name="firstname" class="form-control" placeholder="{{ trans('login.firstname') }}"/>
                        <span class="invalid-input" id="invalid-name"></span>
                    </div>

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

                    <div class="form-group mb-3">
                        <label class="form-label"><b>{{ trans('login.role') }}</b></label>
                        <select disabled class="form-control" 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>
                    <!-- Invalid se non viene selezionato niente -->

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

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

                    <div class="form-group mb-3">
                        <label class="form-label"><b>{{ trans('login.rePassword') }}</b></label>
                        <input disabled type="password" name="confirmPassword" class="form-control" placeholder="{{ trans('login.rePassword') }}"/>
                        <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-grey-btn w-100" disabled="disabled">{{ 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