@extends('client.layouts.auth')
@section('title', 'Đăng nhập')
@section('content')

<section class="auth bg-base d-flex flex-wrap">
    <div class="auth-left d-lg-block d-none">
        <div class="d-flex align-items-center flex-column h-100 justify-content-center">
            <img src="/pack/images/auth-img.png" alt="">
        </div>
    </div>
    <div class="auth-right py-32 px-24 d-flex flex-column justify-content-center">
        <div class="max-w-464-px mx-auto w-100">
            <div>
                <a href="/" class="mb-40 max-w-290-px">
                    <img src="{{site('logo')}}" alt="" width="280" height="280">
                </a>
                <h4 class="mb-12">Đăng nhập tài khoản</h4>
                <p class="mb-32 text-secondary-light text-lg">Vui lòng nhập thông tin</p>
            </div>
            <form method="POST" action="{{ route('login.post') }}" class="theme-form">
                @csrf

                <div class="mb-16">
                    <label for="username" class="form-label">Tài khoản</label>
                    <input type="text" class="form-control h-56-px bg-neutral-50 radius-12"
                        placeholder="Nhập tài khoản" name="username" id="username" value="">
                </div>

                <div class="position-relative mb-20">
                    <label for="your-password" class="form-label">Mật khẩu</label>
                    <div class="position-relative">
                        <input type="password" class="form-control h-56-px bg-neutral-50 radius-12 pe-48"
                            id="your-password" placeholder="Nhập mật khẩu" name="password">
                        <span class="position-absolute top-50 end-0 translate-middle-y me-16" style="cursor: pointer;" onclick="togglePassword()">
                            <i id="togglePasswordIcon" class="fas fa-eye text-secondary-light"></i>
                        </span>
                    </div>
                </div>

                <div class="">
                    <div class="d-flex justify-content-between gap-2">
                        <div class="form-check style-check d-flex align-items-center">
                            <input class="form-check-input border border-neutral-300" type="checkbox"
                                value="" name="remember" id="remeber">
                            <label class="form-check-label" for="remeber">Remember me</label>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary text-sm btn-sm px-12 py-16 w-100 radius-12 mt-32">
                    Đăng nhập tài khoản
                </button>

                <div class="mt-32 text-center text-sm">
                    <p class="mb-0">Nếu bạn chưa có tài khoản hãy <a href="/auth/register"
                            class="text-primary-600 fw-semibold">Đăng ký</a></p>
                </div>

            </form>
        </div>
    </div>
</section>

@endsection

@section('script')
@if (session('two_factor_auth'))
<script>
    Swal.fire({
        toast: true,
        position: 'top',
        icon: 'info',
        title: 'Bạn vui lòng nhập mã xác thực 2 yếu tố để đăng nhập vào tài khoản',
        showCloseButton: false,
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        customClass: {
            popup: 'swal2-toast swal2-error-toast'
        }
    });
</script>
@endif

<script>
    function togglePassword() {
        const passwordInput = document.getElementById('your-password');
        const icon = document.getElementById('togglePasswordIcon');
        const isHidden = passwordInput.type === 'password';

        passwordInput.type = isHidden ? 'text' : 'password';
        icon.classList.toggle('fa-eye');
        icon.classList.toggle('fa-eye-slash');
    }
</script>
@endsection

@push('head')
<!-- Font Awesome (nếu chưa có trong layout) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endpush