@extends('layouts.main')
@section('title', $data['title'])
@section('content')


    <style type="text/css">
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0;
        }


        .card-2 {

            padding: 10px;
            width: 350px;
            height: 100px;
            bottom: -50px;
            left: 20px;
            position: absolute;
            border-radius: 5px;
        }

        .card-2 .content {
            margin-top: 50px;
        }

        .is-valid {
            border-color: #28a745;
        }

        .is-invalid {
            border-color: #dc3545;
        }

        .invalid-feedback {
            color: #dc3545;
            font-size: 0.875rem;
        }

        .valid-feedback {
            color: #28a745;
            font-size: 0.875rem;
        }
    </style>
    <div class="page-content">
        <div class="container-fluid">

            <!-- Start Page Title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        {{-- <h4 class="mb-sm-0 font-size-18">Change Password</h4> --}}
                    </div>
                </div>
            </div>
            <!-- End Page Title -->

            @if (Auth::user()->is_changed_password == 0)
                <div class="alert alert-warning" role="alert">
                    Please change your password and access the website for security reasons.
                </div>
            @endif

            <div class="row" id="non-prime-div">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form id="formPassword" class="custom-validation" action="{{ route('do.changepassword') }}"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                <div id="password_div">
                                    @if (Auth::user()->is_changed_password == 1)
                                        <div class="mb-3 row">
                                            <label for="old_password" class="col-md-4 col-form-label">Old Password</label>
                                            <div class="col-md-8">
                                                <input class="form-control" type="password" id="old_password"
                                                    name="old_password" required>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div class="mb-3 row">
                                    <label for="new_password" class="col-md-4 col-form-label">New Password</label>
                                    <div class="col-md-8 position-relative">
                                        <input type="password" class="form-control" placeholder=" New Password"
                                            name="new_password" id="new_password">
                                        <span class="toggle-password1 position-absolute"
                                            style="right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; height: 37px; border: 1px solid #979797; width: 44px; text-align: center;">
                                            <i class="bx bxs-hide" style="font-size: large;margin-top: 7px;"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="mb-3 row">
                                    <label for="confirm_password" class="col-md-4 col-form-label">Confirm Password</label>
                                    <div class="col-md-8 position-relative">
                                        <input type="password" class="form-control" placeholder=" Confirm Password"
                                            name="confirm_password" id="confirm_password">
                                        <span class="toggle-password1 position-absolute"
                                            style="right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; height: 37px; border: 1px solid #979797; width: 44px; text-align: center;">
                                            <i class="bx bxs-hide" style="font-size: large;margin-top: 7px;;"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="d-flex flex-wrap gap-2">
                                    <button type="reset" class="btn btn-primary waves-effect waves-light" id="pass_reset">
                                        Reset
                                    </button>
                                    <button type="submit" class="btn btn-primary waves-effect waves-light"
                                        id="update_password">
                                        Update
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div> <!-- End Row -->
        </div> <!-- End Container-Fluid -->
    </div> <!-- End Page-Content -->

@endsection('content')
@section('custom-scripts')
    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script type="text/javascript">
        var ajaxChangePasswordOTP = '{{ route('changepassword.otp') }}';

        document.addEventListener("DOMContentLoaded", function(event) {

            function OTPInput() {
                const inputs = document.querySelectorAll('#otp > *[id]');
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].addEventListener('keydown', function(event) {
                        if (event.key === "Backspace") {
                            inputs[i].value = '';
                            if (i !== 0) inputs[i - 1].focus();
                        } else {
                            if (i === inputs.length - 1 && inputs[i].value !== '') {
                                return true;
                            } else if (event.keyCode > 47 && event.keyCode < 58) {
                                inputs[i].value = event.key;
                                if (i !== inputs.length - 1) inputs[i + 1].focus();
                                event.preventDefault();
                            } else if (event.keyCode > 64 && event.keyCode < 91) {
                                inputs[i].value = String.fromCharCode(event.keyCode);
                                if (i !== inputs.length - 1) inputs[i + 1].focus();
                                event.preventDefault();
                            }
                        }
                    });
                }
            }
            OTPInput();


        });

        $(document).ready(function() {

            $(".toggle-password1").on("click", function() {
                let inputField = $(this).siblings("input");
                let icon = $(this).find("i");
                if (inputField.attr("type") === "password") {
                    inputField.attr("type", "text");
                    icon.removeClass("bxs-hide").addClass("bxs-show");
                } else {
                    inputField.attr("type", "password");
                    icon.removeClass("bxs-show").addClass("bxs-hide");
                }
            });
        });

        $('#pass_reset').on('click', function() {
            $('#formPassword input').removeClass('is-valid is-invalid');
            $('#formPassword .invalid-feedback').remove();
        });



        $(document).ready(function() {
            var options = {
                beforeSubmit: showRequest,
                success: showResponse


            };


            $('#formPassword').ajaxForm(options);
        });

        function showRequest(formData, jqForm, options) {


            var queryString = $.param(formData);

            $("#update_password").html("Saving...");
            $("#update_password").prop("disabled", true);
            $("#pass_reset").prop("disabled", true);

            return true;
        }


        function showResponse(responseText, statusText, xhr, $form) {

            $("#update_password").html("Save");
            $("#update_password").prop("disabled", false);
            $("#pass_reset").prop("disabled", false);

            if (responseText['status'] == 1) {
                var form_type = $("#form_type").val();

                toastr["success"](responseText['msg']);

                if (form_type == "form_otp") {
                    $("#form_type").val("form_change_password");
                    $("#div_verify_otp").attr("style", "display: none !important");
                    $("#password_div").show();


                } else {

                    setTimeout(function() {
                        window.location.href = "{{ route('dashboard') }}";
                    }, 1000);

                }

            } else if (responseText['status'] == 0) {

                toastr["error"](responseText['msg']);

            }


        }

        $("#sendOTP, #resendOTP").click(function() {

            $("#sendOTP").html("Sending...");
            $("#resendOTP").html("Sending...");
            $("#sendOTP").attr('disabled', true);
            $("#resendOTP").attr('disabled', true);

            $.ajax({
                type: 'GET',
                url: ajaxChangePasswordOTP,
                success: function(resultData) {
                    if (resultData['status'] == 1) {

                        toastr["success"](resultData['msg']);
                        $("#recieverLable").html(resultData['reciever_lable']);
                        $("#sendOTP").html("Send");
                        $("#resendOTP").html("Resend");
                        $("#sendOTP").attr('disabled', false);
                        $("#resendOTP").attr('disabled', false);


                        $("#first").val("");
                        $("#second").val("");
                        $("#third").val("");
                        $("#fourth").val("");

                        $("#div_send_otp").attr("style", "display: none !important");
                        $("#div_verify_otp").show();

                    } else {
                        toastr["error"](resultData['msg']);
                    }

                }
            });





        });
    </script>
@endsection