@extends('adminlte::page')
@section('title', 'Change Password')

@section('content_header')

    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>{{ __('adminlte::menu.change_password') }}</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">{{ __('adminlte::menu.change_password') }}</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <form action="{{ route('change.password') }}" method="POST" id="changePasswordForm">
        @csrf

        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">Change Password</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Current Password -->
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="current_password">Current Password</label>
                                    <input type="password" name="current_password" id="current_password"
                                        class="form-control @error('current_password') is-invalid @enderror"
                                        placeholder="Enter current password">
                                    @error('current_password')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- New Password -->
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password">New Password</label>
                                    <input type="password" name="password" id="password"
                                        class="form-control @error('password') is-invalid @enderror"
                                        placeholder="Enter new password">
                                    @error('password')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Confirm Password -->
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password_confirmation">Confirm New Password</label>
                                    <input type="password" name="password_confirmation" id="password_confirmation"
                                        class="form-control" placeholder="Re-enter new password">
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <a href="{{ url('/dashboard') }}" class="btn btn-secondary">Cancel</a>
                                <button type="submit" class="btn btn-success">Update Password</button>

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

                </div> <!-- /.card -->
            </div>
        </div>
    </form>

@endsection

@push('js')
    <!-- Include jQuery, AdminLTE JS, and DataTables JS -->
    <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
    <script>
        $('#changePasswordForm').on('input change', 'input, select, textarea', function() {
            $(this).removeClass('is-invalid');
        });
        $("#changePasswordForm").on("submit", function(e) {
            e.preventDefault(); // prevent form from reloading page
            let formData = $(this).serialize();
            $.ajax({
                url: "{{ route('change.password') }}",
                type: "POST",
                data: formData,
                success: function(response) {
                    Swal.fire({
                        toast: true,
                        icon: 'success',
                        title: 'Password updated successfully!',
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true
                    });
                    $('#changePasswordForm')[0].reset();
                    // Redirect after short delay
                    setTimeout(() => {
                        window.location.href = "{{ route('change.password.form') }}";
                    }, 3000);
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    if (errors) {
                        // Get first error
                        let firstErrorKey = Object.keys(errors)[0];
                        let firstErrorMsg = errors[firstErrorKey][0];
                        // Highlight the input field
                        $(`[name="${firstErrorKey}"]`).addClass('is-invalid');
                        // Show toast notification
                        Swal.fire({
                            toast: true,
                            icon: 'error',
                            title: firstErrorMsg,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 5000,
                            timerProgressBar: true,
                            didOpen: (toast) => {
                                toast.onmouseenter = Swal.stopTimer;
                                toast.onmouseleave = Swal.resumeTimer;
                            }
                        });
                    }

                },
            });
        });
    </script>
@endpush