{{--
    Change password modal — same route, request, and client validation as change-password.blade.php.

    Open from Alpine:
        @click="$dispatch('open-change-password-modal', '{{ $modalId }}')"

    Open from JavaScript:
        window.openChangePasswordModal('{{ $modalId }}');
        // or
        window.dispatchEvent(new CustomEvent('open-change-password-modal', { detail: '{{ $modalId }}' }));
--}}

@props([
    'role' => null,
    'modalId' => 'change-password-modal',
])

@php
    $role = $role ?: config('auth.defaults.guard');
@endphp

@if(isset($trigger))
    {{ $trigger }}
@endif

@push('modals')
    <x-feedback.modal
        :id="$modalId"
        :title="__('pages/profile.change_password.heading')"
        size="md"
    >
        <div x-data="changePasswordModal('{{ $modalId }}')">
            <p class="mb-5 text-sm text-muted-foreground">
                {{ __('pages/profile.change_password.description') }}
            </p>

            <form
                action="{{ route($role.'.profile.password') }}"
                method="POST"
                id="changePasswordModalForm"
                class="space-y-4"
                novalidate
                @submit.prevent="submitPassword"
            >
                @csrf
                @method('PATCH')

                <div class="space-y-4">
                    <div class="space-y-1.5">
                        <x-forms.label for="modal_current_password" required>{{ __('form.label.current_password') }}</x-forms.label>
                        <x-forms.input
                            type="password"
                            name="current_password"
                            id="modal_current_password"
                            placeholder="{{ __('placeholders.please_enter', ['attribute' => __('form.label.current_password')]) }}"
                            autocomplete="current-password"
                            required
                            x-bind:disabled="passwordSubmitting"
                        />
                    </div>
                    <div class="space-y-1.5">
                        <x-forms.label for="modal_new_password" required>{{ __('form.label.new_password') }}</x-forms.label>
                        <x-forms.input
                            type="password"
                            name="new_password"
                            id="modal_new_password"
                            placeholder="{{ __('placeholders.please_enter', ['attribute' => __('form.label.new_password')]) }}"
                            autocomplete="new-password"
                            required
                            x-bind:disabled="passwordSubmitting"
                        />
                    </div>
                    <div class="space-y-1.5">
                        <x-forms.label for="modal_confirm_password" required>{{ __('form.label.password_confirmation') }}</x-forms.label>
                        <x-forms.input
                            type="password"
                            name="confirm_password"
                            id="modal_confirm_password"
                            placeholder="{{ __('placeholders.please_enter', ['attribute' => __('form.label.password_confirmation')]) }}"
                            autocomplete="new-password"
                            required
                            x-bind:disabled="passwordSubmitting"
                        />
                    </div>
                </div>

                <div class="flex flex-col-reverse gap-3 border-t border-border pt-5 sm:flex-row sm:justify-end">
                    <x-buttons.primary type="submit" x-bind:disabled="passwordSubmitting">
                        <x-heroicon-o-arrow-path class="h-4 w-4 animate-spin" x-show="passwordSubmitting" x-cloak />
                        <span x-text="passwordSubmitting ? '{{ __('buttons.updating') }}' : '{{ __('buttons.save') }}'"></span>
                    </x-buttons.primary>
                    <x-buttons.secondary
                        type="button"
                        @click="$dispatch('close-modal', '{{ $modalId }}')"
                        x-bind:disabled="passwordSubmitting"
                    >
                        {{ __('buttons.cancel') }}
                    </x-buttons.secondary>
                </div>
            </form>
        </div>
    </x-feedback.modal>
@endpush

@once
    @push('before-app-js')
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
        {!! JsValidator::formRequest('App\Http\Requests\ChangePasswordRequest', '#changePasswordModalForm') !!}
        @vite(['resources/js/common/validation.js', 'resources/js/user/change-password-modal.js'])
    @endpush
@endonce