@extends('layouts.auth')
@section('style')
@endsection

@section('content')
<div class="col-lg-6">
    <div class="p-lg-5 p-4">
        <div>
            <h5 class="text-primary">Welcome Back!</h5>
            <p class="text-muted">Daftar sekarang dapatkan free trial selama 7 hari</p>
        </div>

        <div class="mt-0">
            <form class="needs-validation" method="post" novalidate action="{{ route('register') }}">@csrf
                <div class="mb-2">
                    <label for="name" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="Contoh : Michelle Wijaya" required value="{{ old('name') }}">
                    <div class="invalid-feedback">
                        Silahkan memasukkan nama lengkap
                    </div>
                </div>
                <div class="mb-2">
                    <label for="username" class="form-label">Nama Peggguna <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="Contoh : michellewjy123" value="{{ old('username') }}" required>
                    <div class="invalid-feedback">
                        Silahkan memasukkan nama pengguna
                    </div>
                </div>
                <div class="mb-2">
                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Contoh : michelle.wijaya@gmail.com" value="{{ old('email') }}" required>
                    <div class="invalid-feedback">
                        Silahkan memasukkan email
                    </div>
                </div>
                <div class="mb-2">
                    <label for="phone" class="form-label">Nomor Telepon <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="Contoh : 08123456789" value="{{ old('phone') }}" required>
                    <div class="invalid-feedback">
                        Silahkan masukkan nomor telpon
                    </div>
                </div>
                <div class="mb-2">
                    <label class="form-label" for="password-input">Kata Sandi</label>
                    <div class="position-relative auth-pass-inputgroup">
                        <input type="password" name="password" class="form-control pe-5 password-input" onpaste="return false" placeholder="Enter password" id="password-input" aria-describedby="passwordInput" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
                        <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon material-shadow-none" type="button" id="password-addon"><i class="ri-eye-fill align-middle"></i></button>
                        <div class="invalid-feedback">
                            Please enter strong password mix (upper,lowercase, number, special character)
                        </div>
                    </div>
                </div>
                <div class="mb-2">
                    <label class="form-label" for="password-input">Ulang Kata Sandi</label>
                    <div class="position-relative auth-pass-inputgroup">
                        <input type="password" name="re-type-password" class="form-control pe-5 password-input" onpaste="return false" placeholder="Enter password" id="password-input-retype" aria-describedby="passwordInput" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
                        <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon material-shadow-none" type="button" id="password-addon-retype"><i class="ri-eye-fill align-middle"></i></button>
                        <div class="invalid-feedback">
                            Please enter strong password mix (upper,lowercase, number, special character)
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <button class="btn btn-success w-100" type="submit">Daftar</button>
                </div>
            </form>
        </div>

        <div class="mt-2 text-center">
            <p class="mb-0">Already have an account ? <a href="{{ route('login') }}" class="fw-semibold text-primary text-decoration-underline"> Signin</a> </p>
        </div>
    </div>
</div>
@endsection

@section('script')
@endsection