<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Вход гостя — Hotel Pineta</title>
    <style>
        :root { --bg:#f6f7fb; --panel:#fff; --line:#d9dfec; --text:#1f2740; --muted:#6c7795; --accent:#3559b7; --error-bg:#fff1f1; --error-text:#9d2020; }
        *{box-sizing:border-box} body{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#fbfcff 0,#f1f4fb 52%,#e9eef9 100%);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
        .panel{width:min(460px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 22px 55px rgba(32,57,123,.10)}
        .brand{display:flex;gap:14px;align-items:center;margin-bottom:22px}.brand img{width:56px;height:56px;border-radius:16px;background:#fff;padding:4px}
        h1{margin:0 0 6px;font-size:28px} p{margin:0;color:var(--muted);line-height:1.5}.field{margin-top:16px} label{display:block;margin-bottom:6px;font-size:14px;color:var(--muted)} input,select{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15px}
        .row{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}.error{margin-top:16px;border-radius:14px;background:var(--error-bg);color:var(--error-text);padding:12px 14px;font-size:14px} button{border:0;border-radius:14px;background:var(--accent);color:#fff;padding:14px 18px;font-size:15px;cursor:pointer}.links{margin-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
    </style>
</head>
<body data-i18n-page="guest_login">
<script>(function(){var s=["it","en","ru","uk","fr","de"],l=String(localStorage.getItem("hotel-pineta-lang")||"it").toLowerCase().split("-")[0];document.documentElement.lang=s.includes(l)?l:"it";})();</script>

<div class="panel">
    <div class="brand">
        <img src="{{ asset('images/hotel/emblem.jpg') }}" alt="Hotel Pineta">
        <div>
            <h1>Hotel Pineta</h1>
            <p data-i18n="brandSub">Гостевой кабинет</p>
        </div>
    </div>


    @if ($errors->any())
        <div class="error">{{ $errors->first() }}</div>
    @endif

    <form method="post" action="{{ route('guest.login.store') }}">
        @csrf
        <div class="field">
            <label for="phone" data-i18n="phone">Телефон</label>
            <input id="phone" class="pineta-phone-input" data-pineta-phone="1" type="tel" name="phone" value="{{ old('phone') }}" placeholder="39..." required autofocus>
        </div>
        <div class="field">
            <label for="password" data-i18n="password">Пароль</label>
            <input id="password" type="password" name="password" minlength="6" required>
            <label style="display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--text);">
                <input type="checkbox" id="show-password" style="width:auto;padding:0;"><span data-i18n="showPassword">Показать пароль</span>
            </label>
        </div>
        <div class="row">
            <label style="display:flex;align-items:center;gap:8px;margin:0;">
                <input type="checkbox" name="remember" value="1" style="width:auto;padding:0;"><span data-i18n="remember">Запомнить</span>
            </label>
            <button type="submit" data-i18n="submit">Войти</button>
        </div>
    </form>

    <div class="links">
        <a href="{{ route('guest.register') }}" data-i18n="register">Зарегистрироваться</a>
        <a href="{{ route('home') }}" data-i18n="backHome">← На главную</a>
    </div>

    <script>
        document.getElementById('show-password')?.addEventListener('change', function () {
            const field = document.getElementById('password');
            if (field) field.type = this.checked ? 'text' : 'password';
        });
    </script>
</div>
<script src="{{ asset('assets/js/phone-fields.js') }}"></script>
<script src="{{ asset('js/site-translations.js') }}"></script>
<script src="{{ asset('js/site-i18n.js') }}"></script>
</body>
</html>
