<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>

  {{-- Favicon --}}
    <link rel="icon" type="image/png" href="{{asset('favicon-96x96.png')}}" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="{{asset('favicon.svg')}}" />
    <link rel="shortcut icon" href="{{asset('favicon.ico')}}"/>
    <link rel="shortcut icon" href="{{asset('favicon-light.ico')}}" media="(prefers-color-scheme: light)"/>
    <link rel="shortcut icon" href="{{asset('favicon-dark.ico')}}" media="(prefers-color-scheme: dark)"/>
    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('apple-touch-icon.png')}}" />
    <link rel="manifest" href="{{asset('site.webmanifest')}}" />
  {{-- end Favicon --}}

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="https://use.typekit.net/dit2bgs.css">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/new_style.css">

</head>

<body>

    <div class="login--box d-flex flex-column min-vh-100 justify-content-center align-items-center">
        <div class="card--ui mt-5" style="width: 400px;">
            <img src="{{env('LOGO', '')}}" alt="" class="img-fluid" id="login--logo"  style="max-width:400px;width: 100%;margin-bottom: 30px;">

            <p class="form--title text-center mb-4">Inserisci le credenziali per accedere</p>
            <form action="/login" method="POST">
                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

                @if(isset($_GET["error"]))
                    <span style="color:red">DATI ERRATI</span><br><br>
                @endif

                <div class="form--item input-group mb-3">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" placeholder="Email" id="email" name="email">
                    <span class="input-group-text" id="basic-addon2"><i class="ico--ui mail"></i></span>
                </div>
                <div class="form--item input-group mb-3">
                    <label for="password">Password</label>
                    <div class="password-wrapper">
                        <input type="password" class="form-control" placeholder="Password" id="password" name="password">
                        <div class="password-eye" onclick="togglePassword(this)">
                            <i class="fas fa-eye password-hidden"></i>
                            <i class="fas fa-eye-slash password-shown"></i>
                        </div>
                    </div>
                    <span class="input-group-text" id="basic-addon2"><i class="ico--ui lock"></i></span>
                </div>
                <div class="form--item input-group d-flex align-items-center justify-content-center">
                    <button type="submit" class="btn--ui">accedi</button>
                </div>
            </form>

            <div class="credential--recovery d-flex flex-column mt-4">
                <a href="/password-reset-request">Hai dimenticato la Password?</a>
            </div>

        </div>
    </div>

  <!-- / header -->

  <script src="/assets/js/bootstrap.bundle.js"></script>
  <script src="/assets/js/app.js"></script>

  <script>
    function togglePassword(eye_icon) {
        let wrapper = eye_icon.parentElement;
        let password_html = wrapper.querySelector("input");

        if (password_html) {
            if (password_html.type == "password") {
                password_html.type = "text";
                eye_icon.classList.add("shown");
            } else {
                password_html.type = "password";
                eye_icon.classList.remove("shown");
            }
        }
    }
  </script>
</body>

</html>
