@extends('layout')

@section('content')
<link href="css/reg.css" rel="stylesheet">
@if(session('registration_failed'))
<div class="alert alert-danger alert-dismissible fade show">
    {{ session('success') }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
@endif

<section>
    <div class="form-box">
        <div class="form-value">
            <form action="{{ route('register2.post') }}" method="POST">
                @csrf
                <h2>Register</h2>
                <div class="inputbox">
                    <ion-icon name="person-outline"></ion-icon>
                    <input type="text" id="first-name" name="first-name" autocomplete="off" required autofocus>
                    <label for="">First Name</label>
                    @if ($errors->has('first-name'))
                    <span class="text-danger">{{ $errors->first('first-name') }}</span>
                    @endif
                </div>
                <div class="inputbox">
                    <ion-icon name="person-outline"></ion-icon>
                    <input type="text" id="last-name" name="last-name" autocomplete="off" required>
                    <label for="">Last Name</label>
                    @if ($errors->has('last-name'))
                    <span class="text-danger">{{ $errors->first('last-name') }}</span>
                    @endif
                </div>
                <div class="inputbox">
                    <ion-icon name="phone-portrait-outline"></ion-icon>
                    <input type="text" id="phn" name="phn" required>
                    <label for="">Phone Number</label>
                    @if ($errors->has('phn'))
                    <span class="text-danger">{{ $errors->first('phn') }}</span>
                    @endif
                </div>
                <div class="inputbox">
                    <select class="form-control" id="gender" name="gender" style="color: #fff; background: transparent; border: none; border-bottom: 2px solid #fff; outline: none; height: 50px; font-size: 1em;">
                        <option value="Male" style="background: transparent; color: #000000;">Male</option>
                        <option value="Female" style="background: transparent; color: #000000;">Female</option>
                        <option value="Other" style="background: transparent; color: #000000;">Other</option>
                        <!-- Add more options as needed -->
                        @if ($errors->has('gender'))
                        <span class="text-danger">{{ $errors->first('gender') }}</span>
                        @endif
                    </select>
                </div>

                <div class="inputbox">
                    <input type="date" id="dob" class="form-control" name="dob" required style="color: #fff; background: transparent; border: none; border-bottom: 2px solid #fff; outline: none; font-size: 1em; padding: 0 5px;">
                    @if ($errors->has('dob'))
                    <span class="text-danger">{{ $errors->first('dob') }}</span>
                    @endif
                </div>

                <div class="inputbox">
                    <ion-icon name="mail-outline"></ion-icon>
                    <input type="text" id="email_address" name="email" autocomplete="off" required>
                    <label for="">Email</label>
                    @if ($errors->has('email'))
                    <span class="text-danger">{{ $errors->first('email') }}</span>
                    @endif
                </div>

                <div class="inputbox">
                    <ion-icon name="lock-closed-outline"></ion-icon>
                    <input type="password" id="password" name="password" autocomplete="off" required>
                    <label for="">Password</label>
                    @if ($errors->has('password'))
                    <span class="text-danger">{{ $errors->first('password') }}</span>
                    @endif
                </div>

                <!-- <div class="login-link">

                    <p>Already a user? <a href="{{ route('login2') }}">Login</a></p>
                    
                    <button type="submit">Register</button> -->

                @csrf
                {!! captcha_img() !!}
                <div style="margin-top: 10px; margin-bottom: 20px;">
                    <input type="text" name="captcha">
                </div>
                <button id="registerButton" type="submit">Register</button>


                <div class="login-link">
    <p style="color: white;">Already a user? <a href="{{ route('login2') }}" style="color: white;">Login</a></p>
</div>


        </div>

        </form>
    </div>
    </div>
</section>

@if (session('success'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        var successAlert = $('<div class="alert alert-success alert-dismissible fade show" role="alert">Registration Successful!</div>');
        var closeButton = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>');

        successAlert.append(closeButton);
        // Append the success message to a specific container or element (here, 'content' class)
        $('.card-body').prepend(successAlert); // You can change the selector to the specific element you prefer
    });

    document.addEventListener("DOMContentLoaded", function() {
        // Add an event listener to the captcha input
        document.querySelector('input[name="captcha"]').addEventListener('input', function() {
            // Enable the Register button if captcha is completed
            if (this.value.trim() !== '') {
                document.getElementById('registerButton').removeAttribute('disabled');
            } else {
                // Disable the Register button if captcha is not completed
                document.getElementById('registerButton').setAttribute('disabled', true);
            }
        });

        // Add an event listener to the Register button
        document.getElementById('registerButton').addEventListener('click', function() {
            console.log("hhbhjn")
            // Submit the form when the Register button is clicked
            document.getElementById('registerForm').submit();
        });
    });
</script>
@endif

<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
@endsection