@extends('front.layout.app')
@section('content')

<main>
    <style>
    header {
    background: #011452;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 0;
}
.sign-in i {
    color: #000;
}
.sign-in {
    color: #000;
    font-weight:600;
    font-size: 18px;
}
.logo {
    filter: brightness(0) saturate(100%)
}
.header-main.scroll .logo {
    filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(7497%) hue-rotate(325deg) brightness(122%) contrast(114%);
}
.header-main.scroll .sign-in {
    color: #fff;
    font-weight:600;
    font-size: 18px;
}
.header-main.scroll .sign-in i {
    color: #fff;
}
.hideShow{
    display: none;
}

.actions ul li:nth-child(3) {
    display: none !important;
}

#sign-up .zones {
    background-color: #eeeeee;
    border: none;
    padding: 13px 15px;
    border-radius: unset;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    color: #757575;
    font-size: 17px;
}
/* .navbar .fa-solid, .fas {
    color: #000 !important;
} */
@media only screen and (min-width: 300px) and (max-width: 975px){
    .nav-link {
    color: #fff !important;
    font-weight: 600;
}
.navbar .dropdown span i{
   color: #fff !important;
}
.navbar-light .navbar-toggler-icon i {
    color: #000 !important;
}
.sign-in, .sign-in i {
    color: #fff;
}

}

</style>
<main>

<section class="sec_signup">
<div class="container right-panel-active" id="container">
    <div class="row">
    <div class="col-lg-6 col-12">
    <div class="form-container sign-up-container">
        <form id="loginForm" action="{{ route("service.login") }}" method="post">
            @csrf
            <h1 class="mb-3">Login Here</h1>
            <span>use your email for Login</span>
            <input type="email" name="email" id="email" placeholder="Email" value="{{ old('email') }}"/>
            <input type="password" name="password" id="password" placeholder="Password" value="{{ old('password') }}"/>
            <div class="error-message text-danger" style="display: none;">
                <span></span>
            </div>
            <span class="hideShow my-3">Create an account<span id="signIn1" style="cursor: pointer; color: blue; margin-left:7px">Sign Up</span></span>
            <a href="{{ route('forgetPassword') }}">Forgot your password?</a>
            <button type="submit">Login</button>
        </form>
    </div>

    <div class="form-container sign-in-container ">
    
        <form id="sign-up" action="{{ route('register.post') }}" method="POST">
        @csrf
            <h1>Sign Up</h1>

            <div class="social-container">
                <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div>
            
            <p id="error"></p> 
            
            <select name="role_id" class="form-select zones" required>
                <option value="" selected disabled>Choose a Zone</option>
                @foreach($roles as $role)
                <option value="{{ $role->id }}">{{ $role->name }}</option>
                @endforeach
            </select>
            
            <input type="email" name="email" id="email" placeholder="Email" class="@error('email') is-invalid @enderror required" autocomplete="email" required/>
            <input type="password" name="password" id="password" placeholder="Password" class="@error('password') is-invalid @enderror required" autocomplete="password" required/>
             
            <input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" autocomplete="confir_password" required/>
            @error('confirm_password')
                <span style="color: red;">{{ $message }}</span>
            @enderror
            <!--<div id="passwordError" style="color: red;"></div>-->
             <span class="hideShow my-3"> Already have account<span id="signUp1" style="cursor: pointer; color: blue; margin-left:7px">Login Here</span></span>
            <button type="submit">Sign Up</button>
            
        </form>
    </div>

    </div>
    <div class="overlay-container">
        <div class="overlay col-12">
            <div class="overlay-panel overlay-left">
                <h1 style="font-size: 33px; margin-bottom: 20px;">Welcome Back!</h1>
                <p>Don't have account please Sign Up here</p>
                <button class="ghost" id="signIn">Sign Up</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1 style="font-size: 33px; margin-bottom: 20px;" >WiseZones</h1>
                <p>Already have account please login here</p>
                
                <button class="ghost ghost-two" id="signUp">Login</button>

            </div>
        </div>
    </div>
    </div>
</div>
</section>
</main>


@section('script')
<script>
    // document.getElementById('sign-up').addEventListener('submit', function (event) {
    //     // Prevent form submission
    //     event.preventDefault();

    //     // Get password and confirm password values
    //     var password = document.getElementById('password').value;
    //     var confirmPassword = document.getElementById('confirm_password').value;

    //     // Check if passwords match
    //     if (password !== confirmPassword) {
    //         // Display error message
    //         document.getElementById('passwordError').innerText = 'Passwords do not match';
    //     } else {
    //         // Clear any previous error message
    //         document.getElementById('passwordError').innerText = '';

    //         // Proceed with form submission
    //         // this.submit();
    //     }
    // });
</script>

<script>

    $(document).ready(function() {
      var desiredURL = "https://custom.democlientlink.com/wisezone/public/sign-up";
      
      if (window.location.href === desiredURL) {
        $('#signIn').click();
      }
    });

    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const signUpButton1 = document.getElementById('signUp1');
    const signInButton1 = document.getElementById('signIn1');

    const container = document.getElementById('container');

    signUpButton.addEventListener('click', () => {
        container.classList.add("right-panel-active");
    });
    signUpButton1.addEventListener('click', () => {
        container.classList.add("right-panel-active");
    });


    signInButton.addEventListener('click', () => {
        container.classList.remove("right-panel-active");
    });
    signInButton1.addEventListener('click', () => {
        container.classList.remove("right-panel-active");
    });

    // $(document).ready(function() {
    //     $('#sign-up').submit(function(e) {
    //         e.preventDefault(); // Prevent the default form submission
    //         $.ajaxSetup({
    //             headers: {
    //                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //             }
    //         });
    //         $.ajax({
    //             url: "",
    //             type: "POST",
    //             data: $('#sign-up').serialize(), // Serialize the form data
    //             dataType: 'JSON',
    //             success: function(response) {
    //                 if(response.success == true)
    //                 {
    //                     window.location.href = response.url;
    //                 }
    //             },
    //             error: function(xhr) {
    //                 if(xhr.status == 422)
    //                 {
    //                     var data = JSON.parse(xhr.responseText);
    //                     $(data.password).each(function(index, element) {
    //                         $('#error').html(element);
    //                     });

    //                 }
    //                 // Handle errors
    //                 // console.error('Error:', xhr.responseText);
    //             }
    //         });
    //     });
    // });
    
    // $(document).ready(function () {
    //     // Assuming you have a form with id="loginForm"
    //     $('#loginForm').submit(function (e) {
    //         e.preventDefault(); // Prevent the default form submission
            
    //         // Get form data
    //         var formData = $(this).serialize();

    //         // Send AJAX request
    //         $.ajax({
    //             url: '{{ route("service.login") }}', // Replace with your actual endpoint
    //             type: 'POST',
    //             data: formData,
    //             headers: {
    //                 'X-CSRF-TOKEN': '{{ csrf_token() }}', // Corrected CSRF token retrieval
    //             },
    //             dataType: 'json',
    //             success: function (response) {
    //                 // Handle successful login
    //                 if (response.message) {
    //                     // Redirect or perform any other action
    //                     window.location.href = response.redirectUrl;
    //                 } else {
    //                     // Display error message
    //                     $('.error-message span').text(response.error);
    //                     $('.error-message').show();
    //                 }
    //             },
    //             error: function (error) {
    //                 console.error('Error:', error);
    //             }
    //         });
    //     });
    // });
    

</script>

@endsection
@endsection