@extends('client.layouts.auth')
@section('title', 'Đăng kí')
@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 kí 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('register.post') }}" class="theme-form">
                @csrf

                <div class="mb-16">
                    <label for="name" class="form-label">Số điện thoại</label>
                    <input type="text" class="form-control h-56-px bg-neutral-50 radius-12"
                        placeholder="Nhập số điện thoại" name="name" id="name" value="">
                </div>
                <div class="mb-16">
                    <label for="email" class="form-label">Email</label>
                    <input type="text" class="form-control h-56-px bg-neutral-50 radius-12"
                        placeholder="Nhập địa chỉ email" name="email" id="email" value="">
                </div>
                <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 (viết liền không dấu)" 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">Đồng ý với điều khoản</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 kí tài khoản</button>

                <div class="mt-32 text-center text-sm">
                    <p class="mb-0">Nếu bạn đã có tài khoản hãy <a href="/auth/login"
                            class="text-primary-600 fw-semibold">Đăng nhập</a></p>
                </div>
            </form>
        </div>
    </div>
</section>

@endsection

@section('script')
<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 (chỉ thêm nếu chưa có) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endpush