@extends('front.include.app')
@section('content')
    <section class="auth">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="login">
                        <h2>Signup</h2>
                        <form class="login_form" action="{{ route('submit.register') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" placeholder="Name" id="name" required name="name"
                                    class="form-control" value="{{ old('name') }}">
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="email">Email address</label>
                                <input type="email" placeholder="Email address" id="email" required name="email"
                                    class="form-control" value="{{ old('email') }}">
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="password">Create password</label>
                                <input type="password" placeholder="Your password" id="password" required name="password"
                                    class="form-control">
                                <i class="fal fa-eye toggle-password"></i>
                                @error('password')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="password_confirmation">Confirm password</label>
                                <input type="password" placeholder="Confirm password" id="password_confirmation"
                                    required name="password_confirmation" class="form-control">
                                <i class="fal fa-eye toggle-password"></i>
                            </div>
                            <button type="submit">Signup</button>

                            <h5>already have an account? <a href="{{ route('login') }}">login</a></h5>
                            {{-- <p>Or log in with</p>
                            <div class="btn-group">
                                <a href="#"><img src="{{ asset('front/images/google.png') }}" class="img-fluid"
                                        alt="google"></a>
                                <a href="#"><img src="{{ asset('front/images/facebook.png') }}" class="img-fluid"
                                        alt="facebook"></a>
                            </div> --}}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="insta-sec">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-5">
                    <div class="insta-content" data-aos="fade-up" data-duration="4000">
                        <a href="">follow on instagram<i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Add password toggle functionality
        document.querySelectorAll('.toggle-password').forEach(function(icon) {
            icon.addEventListener('click', function() {
                const input = this.previousElementSibling;
                const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                input.setAttribute('type', type);
                this.classList.toggle('fa-eye-slash');
            });
        });
    </script>
@endsection