@extends('user.layout.default')

@section('content')
<style>

     span ul li {
        margin-top: -17px !important;
        margin-bottom: 15px !important;
        margin-left: -108px;
     }

    </style>

<!-- // Navbar Top start // -->
<div class="navabar1">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <h6 class="dashbod_title">Settings</h6>
            @include('user.inc.navbar')
        </div>
    </nav>
</div>
<!-- // Navbar Top End // -->


<!-- // Section-one-Settings // -->
<div class="stucture">
    <section class="Section-one-blog Section-one-settings">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- boxes-dashboard start -->
                    <div class="boxes-dashboard">
                        <!-- box-1 -->
                        <div class="box-1-dashboard">
                            <!-- left navbar settings -->
                            @include('user.inc.left-navbar-settings')


                            <!-- right navbar settings -->
                            <div class="right-navbar-settings main">
                                <section class="sign_sec">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                <div class="sign-left">
                                                    <div class="change-pw-img-container">
                                                        <img src="{{asset('assets/images/settings/changepw-img.png')}}" alt="change pw">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                <div class="sign-left">
                                                    <div class="chnage-pw-content">
                                                        <div class="logo1">
                                                            <img src="{{asset('assets/images/logo1.png')}}" alt="logo">
                                                        </div>
                                                        <div class="sign-title">
                                                            <h5>Change Password</h5>
                                                            <p>Your new password must be different from previoulsy used password. </p>


                                                        </div>

                                                        <form class="w-100" id="signupform" name="signupform" method="POST" action="{{ route('change_password_post') }}" enctype="multipart/form-data" data-parsley-validate="">
                                                            @csrf
                                                            @include('user.inc.flash')

                                                            <div class="change-pw-form sign-form">

                                                                <div class="input-fild">
                                                                    <input type="password" name="old_password" id="old_password" value="" placeholder="Current Password" data-parsley-required="true" data-parsley-required-message="Please enter current password" data-parsley-errors-container="#oldpassworderror">
                                                                    <label for="" class="left-icon"><img src="{{asset('assets/images/icons/lock.svg')}}" alt="password"></label>
                                                                    <label id="toggle-old_password" style="font-size: math;cursor: pointer; color: #686363;" for="" class="right-icon"><i class="fas fa-eye-slash fa-lg" id="eye-iconold"></i></label>
                                                                </div>
                                                                <span id="oldpassworderror" class="text-danger"></span>


                                                                <div class="input-fild">
                                                                    <input type="password" name="new_password" id="new_password" value="" placeholder="New Password" pattern="^(?=.*[A-Za-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$" data-parsley-required="true" data-parsley-required-message="Please enter new password" data-parsley-pattern-message="Password should containat least 1 digit, 1 special character, 1 uppercase & 1 lowercase, and have a minimum length of 8 characters" data-parsley-errors-container="#newpassworderror">
                                                                    <label for="" class="left-icon"><img src="{{asset('assets/images/icons/lock.svg')}}" alt="password"></label>
                                                                    <label id="toggle-password" style="font-size: math;cursor: pointer; color: #686363;" for="" class="right-icon"><i class="fas fa-eye-slash fa-lg" id="eye-icon"></i></label>
                                                                </div>

                                                                <div style="margin-left: -23px;">
                                                                    <span id="newpassworderror" class="text-danger"></span>
                                                                </div>


                                                                <div class="input-fild">
                                                                    <input type="password" name="c_password" id="c_password" value="" placeholder="Confirm Password" data-parsley-required="true" data-parsley-required-message="Please enter confirm password" data-parsley-equalto="#new_password" data-parsley-equalto-message="New password and confirm password should be same" data-parsley-errors-container="#cpassworderror" placeholder="Confirm Password">
                                                                    <label for="" class="left-icon"><img src="{{asset('assets/images/icons/lock.svg')}}" alt="password"></label>
                                                                    <label id="toggle-c_password" style="font-size: math;cursor: pointer; color: #686363;" for="" class="right-icon"><i class="fas fa-eye-slash fa-lg" id="eye-iconn"></i></label>
                                                                </div>
                                                                <span id="cpassworderror" class="text-danger"></span>

                                                            </div>

                                                            <button type="submit" class="Submit btn-1-settings">Submit</button>

                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                        <!-- End -->
                    </div>
                    <!-- boxes-dashboard End -->
                </div>

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

@endsection

@section('script')



<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

    $(document).ready(function() {
        $("#toggle-old_password").click(function() {
            var passwordInput = $("#old_password");
            var eyeIcon = $("#eye-iconold");

            if (passwordInput.attr("type") === "password") {
                passwordInput.attr("type", "text");
                eyeIcon.removeClass("fa-eye-slash").addClass("fa-eye");
            } else {
                passwordInput.attr("type", "password");
                eyeIcon.removeClass("fa-eye").addClass("fa-eye-slash");
            }
        });

        $("#toggle-password").click(function() {
            var passwordInput = $("#new_password");
            var eyeIcon = $("#eye-icon");

            if (passwordInput.attr("type") === "password") {
                passwordInput.attr("type", "text");
                eyeIcon.removeClass("fa-eye-slash").addClass("fa-eye");
            } else {
                passwordInput.attr("type", "password");
                eyeIcon.removeClass("fa-eye").addClass("fa-eye-slash");
            }
        });

        $("#toggle-c_password").click(function() {
            var passwordInput = $("#c_password");
            var eyeIcon = $("#eye-iconn");

            if (passwordInput.attr("type") === "password") {
                passwordInput.attr("type", "text");
                eyeIcon.removeClass("fa-eye-slash").addClass("fa-eye");
            } else {
                passwordInput.attr("type", "password");
                eyeIcon.removeClass("fa-eye").addClass("fa-eye-slash");
            }
        });
    });



    var settingUrl = "{{ route('setting_page') }}";

    $(document).on('click', '.setting', function() {

        var type = $(this).data('type')

        var params = {
            '_token': '{{ csrf_token() }}',
            'types': type,
        };

        $.post(settingUrl, params, function(response, textStatus, xhr) {
            $('.main').html(response.content);
        });
    });



    var changepasUrl = "{{ route('change_password') }}";

    $(document).on('click', '.change_password', function() {

        var params = {
            '_token': '{{ csrf_token() }}',
        };

        $.post(changepasUrl, params, function(response, textStatus, xhr) {
            $('.main').html(response.content);
        });
    });

    $(document).on('click', '.logout', function(e) {
        e.preventDefault();


        Swal.fire({
            title: 'Confirmation',
            text: "Are you sure you want to logout?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, logout',
            customClass: {
                popup: 'custom-swal-popup',
            },
        }).then(function(result) {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("logout") }}',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        Swal.fire({
                            title: 'Logged Out',
                            text: 'The user has been Logout',
                            icon: 'success',
                            customClass: {
                                popup: 'custom-swal-popup',
                            },
                        }).then(function() {
                            if (response && response.url) {
                                window.location.href = response.url;
                            }
                        });
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        Swal.fire('Error!', 'An error occurred while deleting the record.', 'error');
                    }
                });
            }
        });
    });
</script>
@endsection