@extends('layouts.app')

@section('title', 'Đăng nhập | GreenCard.vn')
@section('no-chrome', '1')

@section('content')
<div class="auth-page">
    <div class="auth-wave"></div>

    <div class="auth-card">
        <div class="brandline">
            <h1>GreenCard<span style="color:var(--green);">.vn</span></h1>
            <span class="wave-emoji">&#128075;</span>
        </div>
        <p class="sub">Đăng nhập vào hệ thống</p>

        <p class="greet">Chào mừng bạn quay trở lại! Vui lòng đăng nhập để truy cập bảng điều khiển.</p>

        <form id="loginForm" autocomplete="off">
            <input class="input" type="tel" id="phone" name="phone" placeholder="Số điện thoại">
            <input class="input" type="password" id="password" name="password" placeholder="Mật khẩu" style="display:none;">
            <input class="input" type="text" id="twofa" name="code" placeholder="Nhập mã xác thực 2FA" style="display:none;">
            <button type="submit" class="btn btn-green btn-block" id="loginBtn">Tiếp tục</button>
        </form>

        <p class="auth-alt" id="registerLine">Bạn chưa có tài khoản? <a href="{{ route('register') }}">Tạo tài khoản</a></p>
        <a href="#" class="auth-back" id="backLink" style="display:none;" onclick="goBack(event)">Quay lại nhập số điện thoại</a>

        <div class="sso-note">
            <span class="lock">&#128274;</span>
            <span>Hệ thống sử dụng cơ chế đăng nhập một lần (SSO) chuẩn <b>OAuth 2.0</b>. Thông tin cá nhân của bạn luôn được mã hóa và bảo mật tuyệt đối.</span>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Đăng nhập nhiều bước: SĐT -> Mật khẩu -> (2FA nếu bật)
var step = 'phone';
var form = document.getElementById('loginForm');
var btn = document.getElementById('loginBtn');

function setBusy(busy) {
    btn.disabled = busy;
    if (busy) { btn.dataset.label = btn.textContent; btn.textContent = 'Đang xử lý...'; }
    else { btn.textContent = btn.dataset.label || btn.textContent; }
}

function showStep(next) {
    step = next;
    document.getElementById('password').style.display = (next === 'password' || next === 'twofa') ? '' : 'none';
    document.getElementById('twofa').style.display = next === 'twofa' ? '' : 'none';
    document.getElementById('phone').readOnly = next !== 'phone';
    document.getElementById('password').readOnly = next === 'twofa';
    document.getElementById('registerLine').style.display = next === 'phone' ? '' : 'none';
    var back = document.getElementById('backLink');
    back.style.display = next === 'phone' ? 'none' : '';
    back.textContent = next === 'twofa' ? 'Quay lại nhập mật khẩu' : 'Quay lại nhập số điện thoại';
    btn.textContent = next === 'phone' ? 'Tiếp tục' : (next === 'password' ? 'Đăng nhập ngay' : 'Xác thực');
    btn.dataset.label = btn.textContent;
    if (next === 'password') document.getElementById('password').focus();
    if (next === 'twofa') document.getElementById('twofa').focus();
}

function goBack(e) {
    e.preventDefault();
    showStep(step === 'twofa' ? 'password' : 'phone');
}

form.addEventListener('submit', function (e) {
    e.preventDefault();
    var phone = document.getElementById('phone').value.trim();
    var password = document.getElementById('password').value;
    var code = document.getElementById('twofa').value.trim();

    if (step === 'phone') {
        if (!phone) { showToast('Vui lòng nhập số điện thoại!', 'error'); return; }
        setBusy(true);
        postJSON('{{ route('auth.check-phone') }}', { phone: phone }).then(function (res) {
            setBusy(false);
            if (res.ok) showStep('password');
            else showToast(res.message || 'Số điện thoại không tồn tại.', 'error');
        }).catch(function () { setBusy(false); showToast('Có lỗi xảy ra, vui lòng thử lại!', 'error'); });
        return;
    }

    if (step === 'password') {
        if (!password) { showToast('Vui lòng nhập mật khẩu!', 'error'); return; }
        setBusy(true);
        postJSON('{{ route('auth.login') }}', { phone: phone, password: password }).then(function (res) {
            setBusy(false);
            if (!res.ok) { showToast(res.message || 'Mật khẩu không chính xác.', 'error'); return; }
            if (res.two_factor) { showStep('twofa'); showToast('Vui lòng nhập mã xác thực 2FA'); return; }
            showToast(res.message || 'Đăng nhập thành công!');
            setTimeout(function () { window.location.href = res.redirect; }, 400);
        }).catch(function () { setBusy(false); showToast('Có lỗi xảy ra, vui lòng thử lại!', 'error'); });
        return;
    }

    if (!code) { showToast('Vui lòng nhập mã xác thực 2FA!', 'error'); return; }
    setBusy(true);
    postJSON('{{ route('auth.verify-2fa') }}', { code: code }).then(function (res) {
        setBusy(false);
        if (!res.ok) { showToast(res.message || 'Mã xác thực không chính xác hoặc đã hết hạn!', 'error'); return; }
        showToast(res.message || 'Xác thực và đăng nhập thành công!');
        setTimeout(function () { window.location.href = res.redirect; }, 400);
    }).catch(function () { setBusy(false); showToast('Có lỗi xảy ra, vui lòng thử lại!', 'error'); });
});
</script>
@endpush