@extends('frontend.layout.dashboard-master')
@section('site_title', __('Change Password'))

@section('style')
<style>
    .form-label {
        display: block;
        margin-bottom: 11px;
        font-size: 15px;
        line-height: 20px;
        font-weight: 600;
        color: #1f2937;
    }
    .form-input {
        width: 100%;
        height: 40px;
        border: 1px solid #d6dde6;
        border-radius: 9px;
        background: #ffffff;
        padding: 0 40px 0 15px;
        font-size: 13px;
        font-weight: 500;
        color: #334155;
        outline: none;
        transition: 0.2s ease;
    }
    .form-input::placeholder { color: #64748b; }
    .form-input:focus { border-color: var(--main-color-one); box-shadow: 0 0 0 3px rgba(var(--main-color-one-rgb), 0.12); }
</style>
@endsection

@section('content')
<div class="max-w-[1120px] bg-white border border-[#d9e0e8] rounded-[12px] px-6 py-6">
    <div class="max-w-[720px]">

        <h1 class="text-[22px] leading-7 font-bold text-[#1f2937]">
            {{ __('Change Password') }}
        </h1>
        <p class="mt-3 text-[14px] leading-[22px] font-medium text-[#64748b] max-w-[600px]">
            {{ __('Choose a strong password and don\'t reuse it for other accounts.') }}
        </p>

        <form id="password_change_form" class="mt-7" autocomplete="off">
            @csrf
            <div class="error_msg_container mb-4"></div>

            {{-- Current Password --}}
            <div class="mb-5">
                <label for="current_password" class="form-label">{{ __('Current Password') }}</label>
                <div class="relative">
                    <input type="password" name="current_password" id="current_password"
                        placeholder="{{ __('Enter current password') }}"
                        class="form-input" autocomplete="current-password" />
                    <button type="button" tabindex="-1"
                        class="toggle-eye absolute right-3 top-1/2 -translate-y-1/2 text-[#94a3b8] hover:text-[#334155] transition"
                        data-target="current_password">
                        <svg class="eye-off w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                        </svg>
                        <svg class="eye-on w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </button>
                </div>
                <span id="current_password_match" class="hidden mt-1.5 text-[13px] block"></span>
            </div>

            {{-- New Password --}}
            <div class="mb-5">
                <label for="new_password" class="form-label">{{ __('New Password') }}</label>
                <div class="relative">
                    <input type="password" name="new_password" id="new_password"
                        placeholder="{{ __('Enter new password') }}"
                        class="form-input" autocomplete="new-password" />
                    <button type="button" tabindex="-1"
                        class="toggle-eye absolute right-3 top-1/2 -translate-y-1/2 text-[#94a3b8] hover:text-[#334155] transition"
                        data-target="new_password">
                        <svg class="eye-off w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                        </svg>
                        <svg class="eye-on w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </button>
                </div>
            </div>

            {{-- Confirm New Password --}}
            <div class="mb-7">
                <label for="confirm_new_password" class="form-label">{{ __('Confirm New Password') }}</label>
                <div class="relative">
                    <input type="password" name="confirm_new_password" id="confirm_new_password"
                        placeholder="{{ __('Re-enter new password') }}"
                        class="form-input" autocomplete="new-password" />
                    <button type="button" tabindex="-1"
                        class="toggle-eye absolute right-3 top-1/2 -translate-y-1/2 text-[#94a3b8] hover:text-[#334155] transition"
                        data-target="confirm_new_password">
                        <svg class="eye-off w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                        </svg>
                        <svg class="eye-on w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </button>
                </div>
                <span id="new_password_match" class="hidden mt-1.5 text-[13px] block"></span>
            </div>

            <div class="flex items-center gap-3">
                <button type="button" onclick="history.back()"
                    class="h-[44px] px-5 rounded-[7px] border border-primary text-primary text-[15px] font-semibold hover:bg-primary hover:text-white transition">
                    {{ __('Cancel') }}
                </button>
                <button type="submit"
                    class="change_password_btn h-[44px] px-6 rounded-[7px] bg-primary text-white text-[15px] font-semibold hover:bg-secondary transition">
                    {{ __('Change Password') }}
                </button>
            </div>
        </form>

    </div>
</div>
@endsection

@section('script')
<script>
(function ($) {
    "use strict";
    $(document).ready(function () {

        $(document).on('click', '.toggle-eye', function () {
            var targetId = $(this).data('target');
            var input = $('#' + targetId);
            var isHidden = input.attr('type') === 'password';
            input.attr('type', isHidden ? 'text' : 'password');
            $(this).find('.eye-off').toggleClass('hidden', isHidden);
            $(this).find('.eye-on').toggleClass('hidden', !isHidden);
        });

        var cpTimer;
        $(document).on('keyup', '#current_password', function () {
            clearTimeout(cpTimer);
            var val = $(this).val();
            if (val === '') {
                $('#current_password_match').addClass('hidden').html('');
                return;
            }
            cpTimer = setTimeout(function () {
                $.ajax({
                    url: "{{ route('client.password.check') }}",
                    type: 'post',
                    data: { current_password: val },
                    success: function (res) {
                        var $el = $('#current_password_match').removeClass('hidden');
                        if (res.status === 'match') {
                            $el.html('<span class="text-primary">&#10003; ' + res.msg + '</span>');
                        } else {
                            $el.html('<span class="text-[#F0416C]">&#10005; ' + res.msg + '</span>');
                        }
                    }
                });
            }, 400);
        });

        $(document).on('keyup', '#confirm_new_password, #new_password', function () {
            var np = $('#new_password').val();
            var cnp = $('#confirm_new_password').val();
            if (cnp === '') {
                $('#new_password_match').addClass('hidden').html('');
                return;
            }
            var $el = $('#new_password_match').removeClass('hidden');
            if (np !== cnp) {
                $el.html('<span class="text-[#F0416C]">&#10005; {{ __("Passwords do not match") }}</span>');
            } else {
                $el.html('<span class="text-primary">&#10003; {{ __("Passwords match") }}</span>');
            }
        });

        $('#password_change_form').on('submit', function (e) {
            e.preventDefault();
            $('.change_password_btn').html(
                '<svg class="animate-spin w-5 h-5 inline" fill="none" viewBox="0 0 24 24">' +
                '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
                '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>'
            );
            $.ajax({
                url: "{{ route('client.password') }}",
                method: 'post',
                data: new FormData(this),
                processData: false,
                contentType: false,
                success: function (res) {
                    $('.error_msg_container').html('');
                    $('.change_password_btn').html("{{ __('Change Password') }}");
                    if (res.status === 'success') {
                        $('#password_change_form')[0].reset();
                        $('#current_password_match, #new_password_match').addClass('hidden').html('');
                        toastr.success("{{ __('Password successfully changed.') }}", "Success !");
                    } else if (res.status === 'not_match') {
                        toastr.warning("{{ __('Password and confirm password not match.') }}", "Warning !");
                    } else if (res.status === 'current_pass_wrong') {
                        toastr.warning("{{ __('Current password is wrong.') }}", "Warning !");
                    }
                },
                error: function (err) {
                    $('.error_msg_container').html('');
                    $('.change_password_btn').html("{{ __('Change Password') }}");
                    if (err.responseJSON && err.responseJSON.errors) {
                        $.each(err.responseJSON.errors, function (i, v) {
                            $('.error_msg_container').append('<p class="text-sm text-[#F0416C]">' + v + '</p>');
                        });
                    }
                }
            });
        });

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