@extends('layout.dashboard.index')

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title d-flex flex-column gap-2">
                    <h2>Formulir Ubah Kata Sandi</h2>
                    <small class="text-muted">Silahkan isi form berikut untuk mengubah kata sandi Anda</small>
                </div>
            </div>
            <div class="card-body">
                <form id="form">
                    <div class="d-flex flex-column mb-8 fv-row">
                        <label class="fs-6 fw-bold mb-2 required">Kata Sandi Saat Ini</label>
                        <div class="position-relative">
                            <input type="password" class="form-control form-control-solid" id="current_password"
                                name="current_password" />
                            <i class="fas fa-eye position-absolute top-50 end-0 translate-middle-y me-3 cursor-pointer toggle-password"
                                data-target="current_password"></i>
                        </div>
                    </div>

                    <div class="d-flex flex-column mb-8 fv-row">
                        <label class="fs-6 fw-bold mb-2 required">Kata Sandi Baru</label>
                        <div class="position-relative">
                            <input type="password" class="form-control form-control-solid" id="new_password"
                                name="new_password" />
                            <i class="fas fa-eye position-absolute top-50 end-0 translate-middle-y me-3 cursor-pointer toggle-password"
                                data-target="new_password"></i>
                        </div>
                        <small id="passwordHelp" class="text-muted"></small>
                    </div>

                    <div class="d-flex flex-column mb-8 fv-row">
                        <label class="fs-6 fw-bold mb-2 required">Konfirmasi Kata Sandi Baru</label>
                        <div class="position-relative">
                            <input type="password" class="form-control form-control-solid" id="new_password_confirmation"
                                name="new_password_confirmation" />
                            <i class="fas fa-eye position-absolute top-50 end-0 translate-middle-y me-3 cursor-pointer toggle-password"
                                data-target="new_password_confirmation"></i>
                        </div>
                    </div>
                    <div class="text-end">
                        <button type="reset" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Batal</button>
                        <button type="submit" id="buttonSave" class="btn btn-primary">
                            <span class="indicator-label">Simpan</span>
                            <span class="indicator-progress">Please wait...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(document).on('click', '.toggle-password', function() {
                let target = $(this).data('target');
                let input = $('#' + target);

                if (input.attr('type') === 'password') {
                    input.attr('type', 'text');
                    $(this).removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    input.attr('type', 'password');
                    $(this).removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });

            function validatePassword(password) {
                let regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
                return regex.test(password);
            }

            $('#new_password').on('keyup', function() {
                let password = $(this).val();
                if (!validatePassword(password)) {
                    $('#passwordHelp').html(`
            Kata sandi harus memiliki:
            <br>• Minimal 8 karakter
            <br>• 1 huruf kecil
            <br>• 1 huruf besar
            <br>• 1 angka
            <br>• 1 simbol
        `).addClass('text-danger').removeClass('text-success');
                } else {
                    $('#passwordHelp').html('Kata sandi sudah memenuhi syarat')
                        .addClass('text-success')
                        .removeClass('text-danger');
                }

            });

            $('#form').on('submit', function(e) {
                e.preventDefault();

                let password = $('#new_password').val();

                if (!validatePassword(password)) {
                    showToast('Kata sandi baru tidak memenuhi syarat. Silakan periksa kembali.', 'danger');
                    return;
                }

                $.ajax({
                    url: "{{ route('change-password') }}",
                    type: "POST",
                    data: {
                        current_password: $('#current_password').val(),
                        new_password: password,
                        new_password_confirmation: $('#new_password_confirmation').val()
                    },
                    beforeSend: function() {
                        $('#buttonSave').prop('disabled', true).text('Menyimpan...');
                    },
                    success: function(response) {
                        showToast(response.message, 'success');
                        $('#form')[0].reset();
                    },
                    error: function(xhr) {
                        let errorMessage = 'Terjadi kesalahan. Silakan coba lagi.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        showToast(errorMessage, 'danger');
                    },
                    complete: function() {
                        $('#buttonSave').prop('disabled', false).text('Simpan');
                    }
                });

            });
        });
    </script>
@endsection