@extends('web.layouts.auth')

@section('content')
    <div class="account-pages my-5 pt-sm-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-5">
                    <div class="text-center mb-4">
                        <a href="{{ url('/') }}" class="auth-logo mb-5 d-block">
                            <img src="{{ asset('web/assets/images/logo-dark.png') }}" alt="" height="30"
                                class="logo logo-dark">
                            <img src="{{ asset('web/assets/images/logo-light.png') }}" alt="" height="30"
                                class="logo logo-light">
                        </a>

                        <h4>Sign up</h4>
                        <p class="text-muted mb-4">Get your Chatvia account now.</p>

                    </div>

                    <div class="card">
                        <div class="card-body p-4">
                            <div class="p-3">
                                {{-- <form method="POST" action="{{ route('register') }}">
                                    @csrf

                                    <div class="mb-3">
                                        <label for="name"
                                            class="mb-1 form-label text-md-end">{{ __('Name') }}</label>

                                        <div class="">
                                            <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>

                                    <div class="mb-3">
                                        <label for="email"
                                            class="mb-1 form-label text-md-end">{{ __('Email Address') }}</label>

                                        <div class="">
                                            <input id="email" type="email" autocomplete="off"
                                                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>

                                    <div class="mb-3">
                                        <label for="mobile"
                                            class="mb-1 form-label text-md-end">{{ __('Mobile') }}</label>

                                        <div class="">
                                            <input id="mobile" type="mobile"
                                                class="form-control @error('mobile') is-invalid @enderror" name="mobile" autocomplete="off"
                                                value="{{ old('mobile') }}" required autocomplete="mobile">

                                            @error('mobile')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>


                                    <div class="mb-3 position-relative">
                                        <label for="password"
                                            class="mb-1 form-label text-md-end">{{ __('Password') }}</label>
                                        <input id="password" type="password" autocomplete="new-password"
                                            class="form-control @error('password') is-invalid @enderror" name="password"
                                            required autocomplete="current-password">

                                        <span class="show-pass eye" id="password-eye">
                                            <i class="fa fa-eye-slash" id="password-eye-slash"></i>
                                            <i class="fa fa-eye" id="password-eye-icon" style="display:none;"></i>
                                        </span>

                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <label for="password-confirm"
                                            class="mb-1 form-label text-md-end">{{ __('Confirm Password') }}</label>

                                        <div class="">
                                            <input id="password-confirm" type="password" autocomplete="new-password" class="form-control"
                                                name="password_confirmation" required autocomplete="new-password">
                                        </div>
                                    </div>

                                    <div class="mb-0">
                                        <div class=" offset-md-4">
                                            <button type="submit" class="btn btn-primary">
                                                {{ __('Register') }}
                                            </button>
                                        </div>
                                    </div>
                                </form> --}}
                            </div>
                        </div>
                    </div>

                    <div class="mt-5 text-center">
                        <p>Already have an account ? <a href="{{ route('login') }}" class="fw-medium text-primary"> Signin
                            </a> </p>
                        {{-- <p>©
                            <script>
                                document.write(new Date().getFullYear())
                            </script> Chatvia. Crafted with <i class="mdi mdi-heart text-danger"></i> by
                            Themesbrand
                        </p> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end account-pages -->
@endsection
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#password-eye').click(function() {
            var passwordField = $('#password');
            var eyeIconSlash = $('#password-eye-slash');
            var eyeIcon = $('#password-eye-icon');

            // Toggle the password field visibility
            if (passwordField.attr('type') === 'password') {
                passwordField.attr('type', 'text');
                eyeIconSlash.hide();
                eyeIcon.show();
            } else {
                passwordField.attr('type', 'password');
                eyeIconSlash.show();
                eyeIcon.hide();
            }

            // Toggle a class on the password-eye span
            $(this).toggleClass('password-visible');
        });
    });
</script>

<style>
    .position-relative {
        position: relative;
    }

    .eye {
        position: absolute;
        top: 72%;
        right: 10px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .password-visible #password-eye-slash {
        display: none;
    }

    .password-visible #password-eye-icon {
        display: inline;
    }
</style>