@extends('layouts.app')

@section('content')
<style>
    .black-text {
        color: #fff !important;
    }
    .card{
        background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);
        box-shadow: rgb(254 254 254 / 22%) 0px 5px 15px;
        border-radius: 10px;
        border: 1px solid #ffffff38;
    }
    .card-body{
        padding: 30px
    }
    .form-control{
                background: transparent;
                color: #fff;
                border: 1px solid #ffffff38;
            }
            .form-control:focus{
                background: transparent;
                color: #fff;
                border: 1px solid #ffffff;
                box-shadow: none;
            }
            .form-control::placeholder{
                color: #fff;
            }
            button.btn.btn-primary{
                background: #ffffff;
                border: 1px solid #ffffff;
                color: #0f0c29;
                
            }
            button.btn.btn-primary:hover{
                background: transparent;
                border: 1px solid #ffffff;
                color: #fff;
            }
            button.btn.btn-primary:focus{
                box-shadow: none;
            }
            input#country_code{
                width: 100px;
                background: transparent;
                border-bottom: 1px solid #ffffff38;
            }
            input#country_code:focus{
                border: 1px solid #ffffff;
            }
            input#phone {
                width: 100%;
            }
            .text-muted{
                color: #fff !important;
                font-size: 20px
            }
            .card-header li.nav-item {
                width: 105.44px;
                text-align: center
            }
            .card-header .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
                color: #fff;
                background-color: transparent;
                border: none;
            }
            .card-header .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover, .card-header .nav-tabs .nav-link:focus-visible {
                border: none;
                isolation: isolate;
                padding: 0.5rem 1rem;
                color: #fff !important;
                opacity: 1 !important;
            }
            .card-header .nav-tabs .nav-link{
                position: relative;
                margin: 0px 5px;
            }

            .card-header .nav-tabs .nav-link.active::after, .card-header .nav-tabs .nav-link:hover::after{
                position: absolute;
                content: '';
                width: 100%;
                height: 3px;
                bottom: 0px;
                left: 0px;
                background: #E054BD;
            }
            .card-header{
                border-color: #ffffff38;
                border: unset;
            }
            .form-check-input{
                background: transparent;
                border: 1px solid #ffffff38;
            }
            .form-check-input:checked{
                background: transparent;
                border: 1px solid #ffffff;
            }
            .form-check-input:focus{
                box-shadow: none;
            }
</style>
<div class="auth-content mt-4">
    <div class="card" style="margin: 10px 432px;">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs justify-content-center">
                <li class="nav-item">
                    <a class="nav-link black-text" id="register-tab" data-bs-toggle="tab" href="#register-form">Register</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active black-text" id="login-tab" data-bs-toggle="tab" href="#login-form">Login</a>
                </li>
            </ul>
        </div>
        <div class="card-body text-center">
            <div class="tab-content">
                <div class="tab-pane fade" id="register-form">
                    <h6 class="mb-4 text-muted">Create a new account</h6>
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                <div class="mb-3 text-start">
                    <label for="name" class="form-label black-text">Name <span class="text-danger">*</span></label>
                    <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                    @error('name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="mb-3 text-start">
                    <label for="phone" class="form-label black-text">Phone <span class="text-danger">*</span></label>
                    <div class="input-group d-flex" style="flex-wrap: nowrap;">
                        <input id="country_code" type="text" class="form-control country-code" name="country_code" value="+855" readonly required>
                        <input id="phone" type="text" class="form-control phone-input @error('phone') is-invalid @enderror" maxlength="10" name="phone" required>
                    </div>
                </div>

                <div class="mb-3 text-start">
                    <label for="email" class="form-label black-text">{{ __('Email Address') }} <span class="text-danger">*</span></label>
                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
                    @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="mb-3 text-start">
                    <label for="password" class="form-label black-text">{{ __('Password') }} <span class="text-danger">*</span></label>
                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                    <span id="password-strength"></span>
                    @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="mb-3 text-start">
                    <label for="password-confirm" class="form-label black-text">{{ __('Confirm Password') }} <span class="text-danger">*</span></label>
                    <input id="password-confirm" type="password" class="form-control @error('password_confirmation') is-invalid @enderror" name="password_confirmation" required autocomplete="new-password">
                    <span id="password-match"></span>
                    @error('password_confirmation')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <button type="submit" class="btn btn-primary shadow-2 w-100">{{ __('Register') }}</button>
                    </form>
                </div>
                <div class="tab-pane fade show active" id="login-form">
                    <h6 class="mb-4 text-muted">Log in to your account</h6>
                    <form method="POST" action="{{ route('login') }}">
                    @csrf
                        <div class="mb-3 text-start">
                            <label for="email" class="form-label black-text">Email adress</label>
                             <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                            {{-- <input type="email" class="form-control" placeholder="Enter Email" required> --}}
                             @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                        <div class="mb-3 text-start">
                            <label for="password" class="form-label black-text">Password</label>
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                            {{-- <input type="password" class="form-control" placeholder="Password" required> --}}
                            @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="mb-3 text-start">
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                                <label class="form-check-label black-text" for="remember">
                                    {{ __('Remember Me') }}
                                </label>
                              {{-- <input class="form-check-input" name="remember" type="checkbox" value="" id="check1">
                              <label class="form-check-label" for="check1">
                                Remember me on this device
                              </label> --}}
                            </div>
                        </div>
                        {{-- <p class="mb-0 text-muted">Already have an account? <a href="{{ route('login') }}">Log in</a></p> --}}
                        <button type="submit" class="btn btn-primary w-100">
                                    {{ __('Login') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('assets/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.min.js')}}"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {

    
    $('#password, #password-confirm').on('keyup', function() {
        var password = $('#password').val();
        var confirmPassword = $('#password-confirm').val();

        // Check if passwords match
        var passwordMatchElement = $('#password-match');
        if (password === confirmPassword) {
            passwordMatchElement.text('Passwords match');
            passwordMatchElement.css('color', 'green');
        } else {
            passwordMatchElement.text('Passwords do not match');
            passwordMatchElement.css('color', 'red');
        }
    });


    $('#password').on('keyup', function() {
        var password = $(this).val();
        var strength = 0;

        // Check if password contains at least one uppercase letter
        if (password.match(/^(?=.*[A-Z])/)) {
            strength++;
        }

        // Check if password contains at least one lowercase letter
        if (password.match(/^(?=.*[a-z])/)) {
            strength++;
        }

        // Check if password contains at least one digit
        if (password.match(/^(?=.*[0-9])/)) {
            strength++;
        }

        // Check if password contains at least one special character
        if (password.match(/^(?=.*[!@#$%^&*])/)) {
            strength++;
        }

        // Check if password length is at least 8 characters
        if (password.length >= 8) {
            strength++;
        }

        // Display password strength message
        var passwordStrengthElement = $('#password-strength');
        var requirements = [];

        if (!password.match(/^(?=.*[A-Z])/)) {
            requirements.push("At least one uppercase letter");
        }

        if (!password.match(/^(?=.*[a-z])/)) {
            requirements.push("At least one lowercase letter");
        }

        if (!password.match(/^(?=.*[0-9])/)) {
            requirements.push("At least one digit");
        }

        if (!password.match(/^(?=.*[!@#$%^&*])/)) {
            requirements.push("At least one symbol (!@#$%^&*)");
        }

        if (password.length < 8) {
            requirements.push("Minimum length of 8 characters");
        }

        var message = "Password strength: ";
        if (strength === 5) {
            message += "Strong";
            passwordStrengthElement.css('color', 'green');
        } else if (strength >= 3) {
            message += "Good";
            passwordStrengthElement.css('color', 'blue');
        } else if (strength >= 1) {
            message += "Weak";
            passwordStrengthElement.css('color', 'red');
        }

        if (requirements.length > 0) {
            message += "<br><br>Missing requirements:<br>- " + requirements.join("<br>- ");
        }

        passwordStrengthElement.html(message);
    });

});
</script>
@endsection