@php $user = auth()->user(); @endphp
<div class="modal fade" id="userProfileModal" tabindex="-1" aria-labelledby="userProfileModalLabel" aria-hidden="true" data-has-custom-avatar="{{ $user->avatar ? '1' : '0' }}">
    <div class="modal-dialog modal-dialog-centered profile-modal-dialog">
        <div class="modal-content profile-modal">
            <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" id="userProfileForm">
                @csrf
                @method('PUT')
                <div class="modal-header border-0 pb-0">
                    <div>
                        <h5 class="modal-title profile-modal-title" id="userProfileModalLabel">My Profile</h5>
                        <p class="profile-modal-subtitle mb-0">Update your name, designation, and photo.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">
                    <div class="profile-photo-row">
                        <img src="{{ $user->avatar_url }}" alt="" class="profile-photo-preview" id="profilePhotoPreview">
                        <div class="profile-photo-actions">
                            <label class="btn btn-outline-secondary btn-sm profile-upload-btn mb-2">
                                <i class="bi bi-upload me-1"></i>Upload photo
                                <input type="file" name="avatar" id="profileAvatarInput" accept="image/jpeg,image/png,image/webp" hidden>
                            </label>
                            <button type="button" class="btn btn-link btn-sm text-muted p-0 profile-remove-btn" id="profileRemovePhotoBtn" @disabled(!$user->avatar)>
                                <i class="bi bi-x-circle me-1"></i>Remove photo
                            </button>
                            <input type="hidden" name="remove_avatar" id="profileRemoveAvatar" value="0">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label profile-form-label">Email</label>
                        <input type="email" class="form-control profile-input-readonly" value="{{ $user->email }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label profile-form-label" for="profileName">Full name</label>
                        <input type="text" name="name" id="profileName" class="form-control" value="{{ old('name', $user->name) }}" required maxlength="100">
                    </div>
                    <div class="mb-0">
                        <label class="form-label profile-form-label" for="profileDesignation">Designation</label>
                        <input type="text" name="designation" id="profileDesignation" class="form-control" value="{{ old('designation', $user->designation) }}" maxlength="100" placeholder="e.g. CEO, Accountant">
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary profile-save-btn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@if($errors->hasAny(['name', 'designation', 'avatar']))
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById('userProfileModal');
    if (modal && window.bootstrap) {
        bootstrap.Modal.getOrCreateInstance(modal).show();
    }
});
</script>
@endpush
@endif