@extends('user.layouts.master')
@section('title', __('unlimited'))
@section('contents')
    <!-- Start /.body content -->
    <div class="body-content">
        <div class="decoration blur-2"></div>
        <div class="decoration blur-3"></div>
        <div class="container-xxl">
            <!-- Start Page Header -->
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
            <div class="card mb-4">
                <div class="card-header position-relative">
                    <h6 class="fs-17 fw-semi-bold mb-0">Change Password</h6>
                </div>
                <div class="card-body">
                    <form method="post" id="password-form" action="{{ url('user/changing-password') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row g-4">
                        <div class="col-sm-6">
                            <div class="">
                                <label for="current_password" class="required fw-medium mb-2">Current Password</label>
                                <input type="password" class="form-control" name="current_password" id="current_password" required>
                                @error('current_password')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="">
                                <label for="new_password" class="required fw-medium mb-2">New Password</label>
                                <input type="password" class="form-control" name="new_password" id="new_password" required>
                                @error('new_password')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="">
                                <label for="new_password_confirmation" class="required fw-medium mb-2">Confirm Password</label>
                                <input type="password" class="form-control" name="new_password_confirmation"
                                    id="new_password_confirmation" required>
                                <span id="password-error" class="text-danger"></span>
                                @error('new_password_confirmation')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-12 mt-2">
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">Change</button>
                            </div>
                        </div>
                    </div>
                </form>

                </div>
            </div>

        </div>
    </div>
    <!--/.body content-->

@endsection
@push('script')
    {{-- <script>
        App.initFormView();
        $('body').off('submit', '#password-form');
        $('body').on('submit', '#password-form', function(e) {
            e.preventDefault();
            var $form = $(this);
            var formData = new FormData(this);
            $(".invalid-feedback").remove();

            App.loading(true);
            $form.find('button[type="submit"]')
                .text('Saving')
                .attr('disabled', true);

            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                url: $form.attr('action'),
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                dataType: 'json',
                timeout: 600000,
                success: function(res) {
                    App.loading(false);

                    if (res['status'] == 0) {
                        if (typeof res['errors'] !== 'undefined' && res['errors'].length) {
                            var error_def = $.Deferred();
                            var error_index = 0;
                            jQuery.each(res['errors'], function(e_field, e_message) {
                                if (e_message != '') {
                                    $('[name="' + e_field + '"]').eq(0).addClass('is-invalid');
                                    $('<div class="invalid-feedback">' + e_message + '</div>')
                                        .insertAfter($('[name="' + e_field + '"]').eq(0));
                                    if (error_index == 0) {
                                        error_def.resolve();
                                    }
                                    error_index++;
                                }
                            });
                            error_def.done(function() {
                                var error = $form.find('.is-invalid').eq(0);
                                $('html, body').animate({
                                    scrollTop: (error.offset().top - 100),
                                }, 500);
                            });
                        } else {
                            var m = res['message'];
                            App.alert(m, 'Oops!');
                        }
                    } else {
                        App.alert(res['message']);
                        setTimeout(function() {
                            window.location.href = App.siteUrl('/user/dashboard');
                        }, 1500);
                    }

                    $form.find('button[type="submit"]')
                        .text('Save')
                        .attr('disabled', false);
                },
                error: function(e) {
                    App.loading(false);
                    $form.find('button[type="submit"]')
                        .text('Save')
                        .attr('disabled', false);
                    App.alert(e.responseText, 'Oops!');
                }
            });
        });
    </script> --}}
    <script>
        document.getElementById('password-form').addEventListener('submit', function(event) {
            const newPassword = document.getElementById('new_password').value;
            const newPasswordConfirmation = document.getElementById('new_password_confirmation').value;
    
            if (newPassword !== newPasswordConfirmation) {
                event.preventDefault(); // Prevent form submission
                document.getElementById('password-error').textContent = "Passwords do not match.";
            }
        });
    </script>
@endpush