@extends('front.mainLayout.app')

@section('title', 'Home')

@section('content')
<style>
    .signup-form {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
        }

        .signup-form h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
        }

        .form-group input[type="file"] {
            padding: 5px;
        }

        .form-group textarea {
            resize: vertical;
            height: 100px;
        }

        .form-group input[type="submit"] {
            background-color: #ff4757;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .form-group input[type="submit"]:hover {
            background-color: #ff6b81;
        }

        .privacy-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .privacy-group input {
            width: auto;
        }
        .signup-img img {
            position: absolute;
            width: 27%;
            z-index: 2;
            top: 16%;
        }
</style>
<section class="sign-up-section">
    <div class="container">
        <div class="row m-auto">
            <!-- <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="signup-img">
                    <div class="gradient-circle"></div>
                    <img src="{{ asset('assets/front/comming-soon-img.png') }}" alt="Mobile 1">
                </div>
            </div> -->
            @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
            <div class="signup-form col-lg-6 col-md-12 col-sm-12 m-auto my-5">
                <!-- <img src="{{ asset('assets/front/logo.png') }}" alt="Modal Image" style="width: 50%;">   -->
                <h2>SIGN UP NOW!</h2>
                <p>The first 50,000 users to sign up will enjoy a $5/month subscription for an incredible 5 years – with zero ads throughout the entire period!</p> 
                <!-- <form action="{{ route('register') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input class="form-control" type="text" name="name" id="">
                    </div>

                    <div class="form-group">
                        <label for="inUptUserName">Username</label>
                        <input class="form-control" type="text" name="username" id="">
                    </div>

                    <div class="form-group">
                        <label for="inUptEmail">Email</label>
                        <input class="form-control" type="email" name="email" id="">
                    </div>

                    <div class="form-group">
                        <label for="inputPhone">Phone</label>
                        <input class="form-control" type="text" name="phone" id="">
                    </div>

                    <div class="form-group">
                        <label for="inUptName">Date Of Birth</label>
                        <input class="form-control" type="date" name="date_of_birth" id="">
                    </div>

                </form> -->
                <form action="{{ route('register') }}" method="post" enctype="multipart/form-data">
                    @csrf
            <!-- Name -->
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>
            </div>

            <!-- Username -->
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>

            <!-- Email -->
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>

            <!-- Phone -->
            <div class="form-group">
                <label for="phone">Phone (Optional)</label>
                <input type="tel" id="phone" name="phone">
            </div>

            <!-- Profile Image -->
            <div class="form-group">
                <label for="profile_img">Profile Image</label>
                <input type="file" id="profile_img" name="profile_img" accept="image/*">
            </div>

            <!-- Gender -->
            <div class="form-group">
                <label for="gender">Gender</label>
                <select id="gender" name="gender" required>
                    <option value="">Select Gender</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                    <option value="other">Other</option>
                </select>
            </div>

            <!-- Date of Birth -->
            <div class="form-group">
                <label for="date_of_birth">Date of Birth</label>
                <input type="date" id="date_of_birth" name="date_of_birth" required>
            </div>
            
            <div class="form-group">
                <label for="password">Password</label>
                                <div class="password-input">
                                    <input type="password" name="password" id="password" placeholder="Password" autocomplete required>
                                    <span class="eye-button" id="password-toggle">
                                        <i class="fas fa-eye"></i>
                                    </span>
                                </div>
            </div>
            <div class="form-group">
                <label for="confirm-password">Confirm Password</label>
                                <div class="password-input">
                                    <input type="password" name="password_confirmation" id="password_confirmation" autocomplete placeholder="Confirm Password" required>
                                    <span class="eye-button" id="confirm-password-toggle">
                                        <i class="fas fa-eye"></i>
                                    </span>
                                </div>
                            </div>
                            <label>
                                <input type="checkbox" id="ageCheck" required> You must be at least 14 years old to sign up for the website.
                            </label>
            <!-- Submit Button -->
            <div class="form-group mt-3">
                <input type="submit" value="Sign Up">
            </div>
            <div class="mt-3">
                <p>Already have an account? <a class="text-decoration-none" href="{{ route('login') }}">Login</a> </p>
            </div>
        </form>
            </div>
        </div>
    </div>
</section>

<script>
    // Function to toggle password visibility
    function togglePasswordVisibility(inputId, toggleId) {
            const passwordInput = document.getElementById(inputId);
            const toggleButton = document.getElementById(toggleId);
            const eyeIcon = toggleButton.querySelector("i");

            toggleButton.addEventListener("click", function() {
                if (passwordInput.type === "password") {
                    passwordInput.type = "text";
                    eyeIcon.classList.remove("fa-eye");
                    eyeIcon.classList.add("fa-eye-slash"); // Use a crossed-out eye for hidden
                } else {
                    passwordInput.type = "password";
                    eyeIcon.classList.remove("fa-eye-slash");
                    eyeIcon.classList.add("fa-eye");
                }
            });
        }

        // Initialize toggle for each password input
        togglePasswordVisibility("password", "password-toggle");
        togglePasswordVisibility("password_confirmation", "confirm-password-toggle");
</script>
@endsection