@extends('dashboard.layouts.master')
@section('title', 'Change Password')
@section('content')
<style>
.field-wrapper {
    position: relative;
}
.eye-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
}
.step-container {
    display: none;
}
.step-container.active {
    display: block;
}
</style>
<div class="padding p-30 edit-package">
    <div class="box">
        <div class="box-header m-b-2">
            <div class="box-header-left">
                <h3>Change Password</h3>
                <small>
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / Change Password
                </small>
            </div>
            <div class="box-header-right">
                <div class="box-tool">
                    <ul class="nav">
                        <li class="nav-item inline">
                            <a class="nav-link" href="{{route('users')}}">
                                <i class="material-icons md-18">×</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="box-body">
            @if(Session::has('doneMessage'))
                <div class="alert alert-success">{{ Session::get('doneMessage') }}</div>
            @endif

            <!-- Step 1: Send OTP -->
            <div id="step-1" class="step-container active">
                <div class="form-group row">
                    <label for="register_email" class="col-xl-3 form-control-label">Register Email ID <span class="valid_field">*</span></label>
                    <div class="col-xl-9">
                        <input type="email" name="register_email" class="form-control" id="register_email" placeholder="Enter Register Email ID">
                        <span class="help-block" id="email-error" style="color: red; display: none;"></span>
                        <div><small>Note: Admin gets User Verification code on Email ID</small></div>
                    </div>
                </div>
                <div class="form-group row m-t-md">
                    <div class="offset-xl-3 col-xl-9">
                        <button type="button" id="send-otp-btn" class="solid-button m-r-1" onclick="sendOtp()">Send OTP</button>
                    </div>
                </div>
            </div>

            <!-- Step 2: Verify OTP -->
            <div id="step-2" class="step-container">
                <div class="form-group row">
                    <label for="otp_code" class="col-xl-3 form-control-label">Enter Code <span class="valid_field">*</span></label>
                    <div class="col-xl-9">
                        <input type="text" name="otp_code" class="form-control" id="otp_code" placeholder="Enter Verification Code">
                        <span class="help-block" id="otp-error" style="color: red; display: none;"></span>
                    </div>
                </div>
                <div class="form-group row m-t-md">
                    <div class="offset-xl-3 col-xl-9">
                        <button type="button" id="verify-otp-btn" class="solid-button m-r-1" onclick="verifyOtp()">Verify Code</button>
                        <button type="button" id="resend-otp-btn" class="border-btn" onclick="sendOtp()">Re-send code</button>
                        <div id="otp-timer" style="display: none; margin-top: 10px; color: #ff9800; font-weight: bold;"></div>
                    </div>
                </div>
            </div>

            <!-- Step 3: New Password Form -->
            <div id="step-3" class="step-container">
                {!! Form::open(['route' => ['admin-change-password-update-with-otp'], 'method' => 'POST','name' => 'edit_password', 'id' => 'edit_password', 'autocomplete' => 'off','class'=>'form-horizontal']) !!}
                <input type="hidden" name="otp" id="verified_otp_field">
                
                <div class="form-group row">
                    <label for="password" class="col-xl-3 form-control-label">New Password <span class="valid_field">*</span></label>
                    <div class="col-xl-9">
                        <div class="field-wrapper position-relative">
                             <input type="password" name="password" class="form-control" id="password" placeholder="Enter New Password">
                             <span class="eye-icon new-pass" onclick="togglePassword('password', 'eye-icon-new')">
                                    <i class="fas fa-eye" id="eye-icon-new"></i>
                            </span>
                        </div>
                        @if(Session::has('errorMessageNewPassword'))
                            <span class="help-block"><span style="color: red;" class='validate'>{{ Session::get('errorMessageNewPassword') }}</span></span>
                        @endif
                        <div>
                            <small>
                                <i class="material-icons">&#xe8fd;</i>
                                Note : New Password must contain at least 1 uppercase letter, 1 lowercase letter, 1 number, 1 special character, and be at least 8 characters long
                            </small>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="password_confirmation" class="col-xl-3 form-control-label">Re-enter New Password<span class="valid_field">*</span></label>
                    <div class="col-xl-9">
                        <div class="field-wrapper position-relative">
                            <input type="password" name="password_confirmation" class="form-control" id="password_confirmation" placeholder="Enter Re-enter New Password">
                            <span class="eye-icon" onclick="togglePassword('password_confirmation', 'eye-icon-confirm')">
                                    <i class="fas fa-eye" id="eye-icon-confirm"></i>
                            </span>
                        </div>
                        @if(Session::has('errorMessageConformPassword'))
                            <span class="help-block"><span style="color: red;" class='validate'>{{ Session::get('errorMessageConformPassword') }}</span></span>
                        @endif
                    </div>
                </div>

                <div class="form-group row m-t-md">
                    <div class="offset-xl-3 col-xl-9">
                        <button type="submit" class="solid-button m-r-1">Save & Update</button>
                    </div>
                </div>

                {{Form::close()}}
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    function togglePassword(passwordId, eyeIconId) {
        var passwordField = document.getElementById(passwordId);
        var eyeIcon = document.getElementById(eyeIconId);
        
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            eyeIcon.classList.remove('fa-eye');
            eyeIcon.classList.add('fa-eye-slash');
        } else {
            passwordField.type = 'password';
            eyeIcon.classList.remove('fa-eye-slash');
            eyeIcon.classList.add('fa-eye');
        }
    }

    var timerInterval;
    function startTimer(duration) {
        var timer = duration, minutes, seconds;
        $('#otp-timer').show();
        $('#verify-otp-btn').prop('disabled', false);
        clearInterval(timerInterval);
        timerInterval = setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            $('#otp-timer').text("Expires in: " + minutes + ":" + seconds);

            if (--timer < 0) {
                clearInterval(timerInterval);
                $('#otp-timer').text("OTP expired. Please resend.");
                $('#verify-otp-btn').prop('disabled', true);
            }
        }, 1000);
    }

    function sendOtp() {
        var email = $('#register_email').val();
        if(!email) {
            $('#email-error').text('Email is required').show();
            return;
        }
        $('#email-error').hide();

        var $btn1 = $('#send-otp-btn');
        var $btn2 = $('#resend-otp-btn');
        $btn1.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Sending...');
        $btn2.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Sending...');

        $.ajax({
            url: "{{ route('admin-change-password-send-otp') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                email: email
            },
            success: function(response) {
                $btn1.prop('disabled', false).html('Send OTP');
                $btn2.prop('disabled', false).html('Re-send code');
                if(response.success) {
                    $('#step-1').removeClass('active');
                    $('#step-2').addClass('active');
                    $('#otp-error').hide();
                    startTimer(120);
                } else {
                    $('#email-error').text(response.message).show();
                }
            },
            error: function() {
                $btn1.prop('disabled', false).html('Send OTP');
                $btn2.prop('disabled', false).html('Re-send code');
                $('#email-error').text('An error occurred. Try again.').show();
            }
        });
    }

    function verifyOtp() {
        var otp = $('#otp_code').val();
        if(!otp) {
            $('#otp-error').text('OTP is required').show();
            return;
        }

        $.ajax({
            url: "{{ route('admin-change-password-verify-otp') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                otp: otp
            },
            success: function(response) {
                if(response.success) {
                    $('#verified_otp_field').val(otp);
                    $('#step-2').removeClass('active');
                    $('#step-3').addClass('active');
                } else {
                    $('#otp-error').text(response.message).show();
                }
            }
        });
    }

    @if(Session::has('errorMessageNewPassword') || Session::has('errorMessageConformPassword'))
        $(document).ready(function() {
            // Force step 3 if there's a validation error submitting passwords
            $('#step-1').removeClass('active');
            $('#step-3').addClass('active');
        });
    @endif
</script>
@endsection