@extends('Admin.layouts.app_login')
@section('title', 'Cheers To Season - Password Reset')
@section('content')
    <style>
        /* Target the label element with the id 'confirm_password-error' and class 'error' */
        label#error.confirm_password-error {
            color: red;
            /* Sets the text color to red */
            font-weight: bold;
            /* Optional: Makes the text bold */
            /* You can add more styles as needed */
        }

        /* Style for the eye icons */
        .fa-eye,
        .fa-eye-slash {
            cursor: pointer;
            position: relative;
            top: 2px;
            /* Adjust vertical alignment as needed */
        }

        /* Style for the eye icon when it's not showing the password */
        .fa-eye-slash {
            color: #777;
            /* Adjust color as needed */
        }

        /* Transition effect for smooth icon change */
        .fa-eye,
        .fa-eye-slash {
            transition: color 0.3s ease;
        }

        /* Style for the eye icons */
        .fa-eye,
        .fa-eye-slash {
            cursor: pointer;
            position: absolute;
            right: 10px;
            /* Adjust horizontal alignment as needed */
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            /* Ensure the icon is above the input */
        }

        /* Style for the eye icon when it's not showing the password */
        .fa-eye-slash {
            color: #777;
            /* Adjust color as needed */
        }

        /* Transition effect for smooth icon change */
        .fa-eye,
        .fa-eye-slash {
            transition: color 0.3s ease;
        }
    </style>
    <div class="row w-100" style="height: 100vh;">
        <div class=" col-md-6 m-auto h-100 d-flex flex-column align-itms-center justify-content-center"
            style="background-color: #05244D;">
            <div class="d-flex justify-content-center">
                <img src="{{ asset('public/assets/img/seasons_logo.png') }}" width="150" height="150" alt="">
            </div>
        </div>
        <div class=" col-md-6 h-100 d-flex justify-content-center align-items-center login-background-img"
            style="background-image: url(public/assets/img/login_screen_background.png);">
            <div class="row d-flex flex-column justify-content-center align-items-center m-auto"
                style="width: 60%; z-index: 999;">
                <h3 class="text-start font-weight-bold mb-3 text-white">RESET PASSWORD</h3>
                <form id="password_reset_form">
                    <div class="col-md-12">
                        <!-- <div class="mb-3 input-parent">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            <input type="hidden" id="admin_otp_id" name="reset_id" value="{{ session('admin_data.principal_xid') }}">
                            <input type="password" class="form-control" name="password" placeholder="Password">


                        </div> -->
                        <div class="mb-3 input-parent">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            <input type="hidden" id="admin_otp_id" name="reset_id"
                                value="{{ session('admin_data.principal_xid') }}">
                            <input type="password" class="form-control" name="password" id="password"
                                placeholder="Password">
                            <i class="fa fa-eye-slash" aria-hidden="true" id="togglePassword"></i>
                        </div>
                    </div>
                    <!-- <div class="col-md-12">
                        <div class="mb-3 input-parent">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            <input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Confirm Password">


                        </div>
                    </div> -->
                    <div class="col-md-12">
                        <div class="mb-3 input-parent">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            <input type="password" class="form-control" name="confirm_password" id="confirm_password"
                                placeholder="Confirm Password">
                            <i class="fa fa-eye-slash" aria-hidden="true" id="toggleConfirmPassword"></i>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div>
                            <button type="submit" id="password_reset" class="p-0 download-btn w-100">Login</button>
                        </div>
                    </div>
                </form>





            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script src="{{ asset('public/assets/js/admin/auth/login.js') }}"></script>


    <script>
        document.getElementById('togglePassword').addEventListener('click', function() {
            var passwordField = document.getElementById('password');
            var icon = document.getElementById('togglePassword');
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                passwordField.type = 'password';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });

        document.getElementById('toggleConfirmPassword').addEventListener('click', function() {
            var confirmPasswordField = document.getElementById('confirm_password');
            var icon = document.getElementById('toggleConfirmPassword');
            if (confirmPasswordField.type === 'password') {
                confirmPasswordField.type = 'text';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                confirmPasswordField.type = 'password';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });
    </script>

    <script>
        // Form validation and submission
        // $('#password_reset_form').validate({
        //     rules: {
        //         password: {
        //             required: true,
        //             minlength: 8
        //         },
        //         confirm_password: {
        //             required: true,
        //             equalTo: "#password"
        //         },
        //     },
        //     messages: {
        //         password: {
        //             required: "Please enter a password.",
        //             minlength: "The password field must be at least 8 characters."
        //         },
        //         confirm_password: {
        //             required: "Please Confirm Your Password",
        //             equalTo: "Your Password Do Not Match"
        //         },
        //     },
        //     // invalidHandler: function(event, validator) {
        //     //     var errors = validator.errorList;
        //     //     $.each(errors, function(index, error) {
        //     //         toastr.error(error.message);
        //     //     });
        //     // },
        //     submitHandler: function(form) {
        //         let base_url = url_path;
        //         var formData = new FormData(form);

        //         $.ajaxSetup({
        //             headers: {
        //                 "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        //             },
        //         });

        //         $('#password_reset').prop('disabled', true).text('Processing...');

        //         $.ajax({
        //             url: base_url + '/password_update',
        //             type: 'POST',
        //             data: formData,
        //             processData: false,
        //             contentType: false,
        //             success: function(response) {
        //                 if (response.status_code == 200) {
        //                     toastr.success(response.message);
        //                     window.location.href = base_url + "/";
        //                 } else if (response.status_code == 404) {
        //                     toastr.error(response.message);
        //                     form.reset();
        //                 }
        //                 $('#password_reset').prop('disabled', false).text('Sign In');
        //             },
        //             error: function(xhr) {
        //                 if (xhr.status === 422) {
        //                     var errors = xhr.responseJSON.message;
        //                     $.each(errors, function(index, value) {
        //                         toastr.error(value);
        //                     });
        //                 } else {
        //                     toastr.error('An unexpected error occurred. Please try again.');
        //                 }
        //                 $('#password_reset').prop('disabled', false).text('Sign In');
        //             }
        //         });
        //     }
        // });

        //     $(document).on("click", "#password_reset", function(e) {
        //         e.preventDefault();
        //         $('#password_reset_form').submit();
        //     });
        // });
    </script>





@endsection
