@extends('website.includes.master')

@section('title')
    Signup
@endsection

@section('content')

    <section class="htc__contact__area ptb--100 bg__white pt-5">
        <div class="container">

            <div class="row">
                <div class="contact-form-wrap mt--60">
                    <div class="row">
                        <div class="col-xs-12 col-lg-3 col-md-3"></div>
                        <div class="col-xs-12 col-lg-6 col-md-6">
                            @include('website.includes.laravel_errors')
                            <div class="contact-title">
                                <h2 class="title__line--6">Create your account</h2>
                            </div>
                            <form action="{{ route('save_register_user') }}" method="POST" class="MyForm">
                                @csrf
                                <div class="single-contact-form">
                                    <div class="contact-box subject">
                                        <label for="">Name</label>
                                        <input type="text" name="name" placeholder="Name *" required
                                               value="{{ old('name') }}">
                                    </div>
                                </div>
                                <div class="single-contact-form">
                                    <div class="contact-box subject">
                                        <label for="">Email</label>
                                        <input type="email" name="email" placeholder="Email *" required
                                               value="{{ old('email') }}">
                                    </div>
                                </div>
                                <div class="single-contact-form">
                                    <div class="contact-box subject">
                                        <label for="password">Password</label>
                                        <div style="position: relative;">
                                            <input type="password" id="password" name="password" minlength="8"
                                                   placeholder="********" required value="{{ old('password') }}">
                                            <button type="button" onclick="togglePassword('password', 'toggleIcon1')"
                                                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
                                                <span id="toggleIcon1"><i class="fa fa-eye"></i>️️</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="single-contact-form">
                                    <div class="contact-box subject">
                                        <label for="password_confirmation">Confirm Password</label>
                                        <div style="position: relative;">
                                            <input type="password" id="password_confirmation"
                                                   name="password_confirmation" minlength="8" placeholder="********"
                                                   required value="{{ old('password_confirmation') }}">
                                            <button type="button"
                                                    onclick="togglePassword('password_confirmation', 'toggleIcon2')"
                                                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
                                                <span id="toggleIcon2"><i class="fa fa-eye"></i>️</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="contact-btn">
                                    <button type="submit" class="fv-btn MyHover My30Radius MyButton">SIGNUP</button>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-md-12">
                                        <a href="{{ route('login') }}"> Already have an account <b>Login</b> </a>
                                    </div>
                                </div>
                            </form>
                            <div class="form-output">
                                <p class="form-messege"></p>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-3 col-md-3"></div> 
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('script')
    <script>
        function togglePassword(inputId, iconId) {
            const passwordInput = document.getElementById(inputId);
            const toggleIcon = document.getElementById(iconId);

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.innerHTML = '<i class="fa fa-eye-slash"></i>';
            } else {
                passwordInput.type = 'password';
                toggleIcon.innerHTML = '<i class="fa fa-eye"></i>';

            }
        }
    </script>
@endsection