<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <!-- Configuración de la página -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}"> <!-- Token CSRF para seguridad -->
    <title>Hotel</title>
    <link rel="icon" href="{{ asset('favicon.ico') }}"> <!-- Favicon -->

    <!-- ===========================
        ESTILOS CSS
    ============================ -->

        <!-- Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
        </script>

        <!-- Barlow Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
            rel="stylesheet">

        <!-- Custom Styles -->
        <style>
          /* Tags */
            html,
            body {
                background: -webkit-linear-gradient(#D7D6C2, 55%, #0D6889) !important;
                background: linear-gradient(#D7D6C2, 55%, #0D6889) !important;

                font-family: 'Barlow';
                font-style: normal;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            button {
                color: #fff !important;
            }

          /* Custom Classes */
            .container-fluid {
                min-height: 100vh;
            }

            .login-card {
                background: #ffffff80 !important;
                border-radius: 0.5rem !important;
            }

        </style>

    <!-- ===========================
        SCRIPTS JAVASCRIPT
    ============================ -->

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        {{-- Import Global Scripts --}}
        <script src="{{ asset('js/app.js') }}" defer></script>

        {{-- Import Hotel Settings Control --}}
        <script type="text/javascript" src="{{ asset('js/environment/hotelSettings.js') }}"></script>

</head>

<body>
    <main class="container-fluid align-content-center">
        <div class="d-flex justify-content-center">
            <div class="mb-5 col-10 col-md-6 col-lg-4">
                <div class="px-3 py-2 card login-card">

                    <div class="card-header" style="background-color:transparent">
                        <img src="{{ asset('images/harsi_logo.png') }}" alt="Harsi Logo"
                            class="mx-auto rounded d-block" width="300" height="100">
                    </div>

                    <form method="POST" action="{{ route('login') }}" class="px-3 py-4">
                        @csrf

                        <div class="mb-4 input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">@</div>
                            </div>

                            <input
                                type="email" id="email" name="email"
                                class="form-control @error('email') is-invalid @enderror"
                                placeholder="{{ __('session')['email'] }}" value="{{ old('email') }}"
                                aria-describedby="email-error" autofocus
                            >
                            @error('email')
                                <div id="email-error" class="mb-0 text-center invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </div>
                            @enderror
                        </div>

                        <div class="mb-3 input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">**</div>
                            </div>

                            <input
                                type="password" id="password" name="password"
                                placeholder="{{ __('session')['password'] }}" autocomplete="off"
                                class="form-control @error('password') is-invalid @enderror"
                            />
                            @error('password')
                                <div id="email-error" class="mb-0 text-center invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('password') }}</strong>
                                </div>
                            @enderror
                        </div>

                        <br>

                        <div class="row justify-content-center">
                            <button type="submit" class="btn col-6"
                                style="background:#0D6889; color:#fff;" >
                                {{ __('session')['login'] }}
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </main>
</body>

</html>
