@extends('Admin.layouts.master')



{{-- content start --}}

@section('content')

<div class="app-main flex-column flex-row-fluid" id="kt_app_main">

    <!--begin::Content wrapper-->

    <div class="d-flex flex-column flex-column-fluid">

        <div id="kt_app_content_container" class="app-container container-xxl">

            <div class="row max-w-100 index_table mt-10">

                <div class="top_header d-flex justify-content-between">

                    <p class='fs-2 fw-bold'>Update User's Password</p>

                    <!--<div class="table_right_options d-flex">-->

                    <!--    <div class="d-flex align-items-center position-relative">-->

                    <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->

                    <!--        <span class="svg-icon svg-icon-1 position-absolute ms-6">-->

                    <!--            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">-->

                    <!--                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />-->

                    <!--                <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />-->

                    <!--            </svg>-->

                    <!--        </span>-->

                    <!--end::Svg Icon-->

                    <!-- <div id="newSearchPlace"></div> -->

                    <!--        <input type="text" data-kt-user-table-filter="search" class="form-control bg-white form-control-solid w-250px ps-14" placeholder="Search User" id="searchbox" />-->

                    <!--    </div>-->

                    <!--</div>-->



                </div>

            </div>



            <div class="dataTable_area my-5 mb-0">

                <!--begin::Card-->

                <div class="card">

                    <div class="card-header border-0 pt-6">

                        <div class="card-body py-4">

                            <!--begin::Table-->

                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="users_data_table">

                                <!--begin::Table head-->

                                <thead>

                                    <!--begin::Table row-->

                                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">

                                        <th class="w-60px pe-2 align-top">Sr no</th>

                                        <th class="min-w-125px  w-100px align-top">Full Name</th>

                                        <th class="min-w-125px  w-100px align-top">Email</th>

                                        <th class="min-w-50px w-100px align-top">Password</th>

                                        <th class="min-w-50px w-100px align-top">Edit</th>

                                        <!--<th class="min-w-50px  w-100px align-top ">Status</th>-->

                                        <!--<th class="text-center min-w-100px align-top notexport">Actions</th>-->

                                    </tr>

                                    <!--end::Table row-->

                                </thead>

                                <!--end::Table head-->

                                <!--begin::Table body-->

                                <tbody class="text-gray-600 fw-semibold">


                                    @forelse($users as $user)

                                    <tr>

                                        <td class="min-w-50px w-100px align-top">{{$loop->iteration}}</td>

                                        <td class="min-w-50px w-100px align-top">{{$user->name}}</td>

                                        <td class="min-w-50px w-100px align-top">{{$user->email}}</td>

                                        <td class="min-w-50px w-100px align-top">
                                            <p>{{substr($user->password,0,25)}}</p>
                                        </td>

                                        <td>

                                            <a class="action_icon edit_button" href="#" data-toggle="modal" data-target="#exampleModal" data-id="{{$user->id}}" data-email="{{$user->email}}" data-password="{{$user->password}}">

                                                <svg class="svg-inline--fa fa-pen-to-square" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen-to-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                                    <path fill="currentColor" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.8 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"></path>
                                                </svg><!-- <i class="fa-solid fa-pen-to-square"></i> Font Awesome fontawesome.com-->

                                            </a>

                                        </td>

                                    </tr>

                                    @empty

                                    <tr>No data found</tr>

                                    @endforelse



                                    <!--end::Table row-->

                                </tbody>

                                <!--end::Table body-->

                            </table>

                            <!--end::Table-->

                        </div>

                        <!--end::Card body-->

                    </div>

                    <!--end::Card-->

                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

                        <div class="modal-dialog" role="document">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <h5 class="modal-title" id="exampleModalLabel">Change Password</h5>

                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">

                                        <span aria-hidden="true">&times;</span>

                                    </button>

                                </div>

                                <div class="modal-body">

                                    <form id="updatePassword">

                                        @csrf

                                        <div class="form-group">

                                            <label for="recipient-name" class="col-form-label">Email:</label>

                                            <input type="text" class="form-control" id="email" readonly name="email" />

                                        </div>

                                        <div class="form-group">

                                            <label for="message-text" class="col-form-label">New Password:</label>

                                            <input class="form-control" id="password" type="text" name="password" />

                                        </div>

                                        <div class="form-group">

                                            <label class="col-form-label">Confirm Password:</label>

                                            <input class="form-control" id="confirm_password" type="text" name="confirm_password" />

                                        </div>

                                </div>

                                <div class="modal-footer">

                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

                                    <button type="submit" id="update_password" class="btn btn-primary">Update</button>

                                    </form>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!--end::Content wrapper-->

</div>

<!-- Button trigger modal -->



<!-- Modal -->



@endsection

{{-- content ends --}}



{{-- scripts start --}}

@section('scripts')

<script>
    $(function() {
        $('#users_data_table').DataTable();
    });





    $('.edit_button').on('click', function() {

        $('#email').val($(this).attr('data-email'));

        $('#exampleModal').modal('show');

    })



    // update profile jquery and ajax

    // $('#update_profile').validate({

    //     ignore: [],

    //     debug: false,

    //     rules:{

    //         name: {

    //             required: true,

    //         },

    //         email: {

    //             required: true,

    //         },

    //         mobile_number: {

    //             required: true,

    //         },

    //     },

    //     message: {

    //         name: {

    //             required: "Enter your name",

    //         },

    //         email: {

    //             required: "Enter your email",

    //         },

    //         mobile_number: {

    //             required: "Enter your mobile number",

    //         },

    //     },

    //     submitHandler:function(form)

    //     {

    //         var formData = new FormData(form);



    //         $.ajax({

    //             url:"{{route('update-profile')}}",

    //             type:'POST',

    //             data: formData,

    //             dataType: 'json',

    //             contentType: false,

    //             processData: false,

    //             success:function(result)

    //             {

    //                 if(result.status == 200)

    //                 {

    //                     toastr.success(result.message);

    //                     setTimeout(function(){

    //                         window.location.reload()}

    //                         ,2000);

    //                 }

    //                 else

    //                 {

    //                     toastr.warning(result.message);

    //                 }

    //             }

    //         })

    //     }

    // });



    // update password jquery and ajax

    $('#update_password').on('click', function() {

        $('#updatePassword').validate({

            ignore: [],

            debug: false,

            rules: {

                email: {

                    required: true,

                },

                password: {

                    required: true,

                    minlength: 8,

                },

                confirm_password: {

                    required: true,

                    // equalTo: "#password",

                },

            },

            message: {

                email: {

                    required: "This :attribute field is required",

                },

                password: {

                    required: "This :attribute field is required",

                    minlength: "Password must be 8 character"

                },

                confirm_password: {

                    required: "This confirm password field is required",

                    // equalTo: "Password not matched",

                },

            },

            submitHandler: function(form)

            {

                var formData = new FormData(form);



                $.ajax({

                    url: "{{route('update-user-password')}}",

                    type: 'POST',

                    data: formData,

                    contentType: false,

                    processData: false,

                    dataType: 'json',

                    success: function(result)

                    {

                        if (result.status == 200)

                        {

                            $('#exampleModal').modal('hide');

                            toastr.success(result.message);

                            setTimeout(function() {

                                window.location.reload();

                            }, 2000);

                        } else if (result.status == 400)

                        {

                            toastr.warning(result.message.password);

                        } else

                        {

                            toastr.warning(result.message);

                        }

                    }

                })

            }

        });

    });
</script>

@endsection

{{-- end scripts --}}