[ Avaa Bypassed ]

@extends('admin.layout.app')
@section('title', 'Edit User')
@push('custom_css')
    <link rel="stylesheet" href="{{ asset('assets/js/loader/waitMe.css') }}">
@endpush
@section('content')
    <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">Change Password</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Change Password</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header align-items-center d-flex">
            <h4 class="card-title mb-0 flex-grow-1">Change Password</h4>
        </div><!-- end card header -->

        <div class="card-body">
            <form id="password_form" data-post-uri="{{route('admin.users.change_password')}}">
                <div id="wrapper">
                    <div class="row gy-4 align-items-end d-flex mb-3">
                        <div class="col-md-6">
                            <div>
                                <label for="placeholderInput" class="form-label">Current Password</label>
                                <input type="password" class="form-control" placeholder="Enter current password"
                                       name="current_password">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div>
                                <label for="placeholderInput" class="form-label">New Password</label>
                                <input type="password" class="form-control" placeholder="Enter new password"
                                       name="new_password">
                            </div>
                        </div>
                    </div>

                    <div class="row gy-4 align-items-end d-flex mb-3">
                        <div class="col-md-12">
                            <div>
                                <label for="placeholderInput" class="form-label">Confirm New Password</label>
                                <input type="password" class="form-control" placeholder="Confirm new password"
                                       name="new_password_confirmation">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary float-end users_btn" id="submit">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('custom_scripts')
    <script src="{{ asset('assets/js/loader/waitMe.js') }}"></script>



    <script>
        //handle submit form
        let form = $('#password_form'), users_btn = $('#submit');
        users_btn.on('click', function (e) {
            e.preventDefault()

            $('body').waitMe({
                effect: 'bounce',
                text: 'Submitting. Please wait...',
                color: "#fff",
                bg: 'rgba(0,0,0,0.5)'
            });

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: form.attr("data-post-uri"),
                dataType: 'json',
                type: 'POST',
                data: form.serializeArray(),
                success: function (json) {
                    $('body').waitMe("hide");
                    if (json.status) {
                        toastr.success('Password updated Successfully');
                        location.href = window.location
                    } else {
                        // console.log(json?.data)
                        if (json?.data?.length > 0) {
                            json.data.forEach((error, index) => {
                                toastr.error(error.error, {
                                    CloseButton: true,
                                    ProgressBar: true
                                });
                            })
                        }

                        Snackbar.show({
                            text: json.message,
                            pos: 'bottom-center',
                            backgroundColor: '#a3220f',
                            timeout: 3000
                        });

                    }
                },
                error: function (json) {
                    Snackbar.show({
                        text: 'Something went wrong. Please try again later!',
                        pos: 'bottom-center',
                        backgroundColor: '#a3220f'
                    });
                    $('body').waitMe("hide");
                }
            });
        })
    </script>
@endpush