@props(['user', 'missingFields' => []])

@if(!$user->isProfileComplete())
<div class="modal modal-open" id="profile-completion-modal">
    <div class="modal-box max-w-2xl">
        <div class="flex items-center mb-4">
            <div class="flex-shrink-0">
                <svg class="w-8 h-8 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-lg font-medium text-gray-900">Profile Completion Required</h3>
                <p class="text-sm text-gray-500">You must complete your profile to continue using the platform.</p>
            </div>
        </div>

        <div class="mb-6">
            <div class="alert alert-error mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span><strong>Action Required:</strong> Your profile is incomplete and must be finished to continue.</span>
            </div>

            <p class="text-sm text-gray-700 mb-4">
                The following information is required to complete your profile:
            </p>

            <div class="bg-base-200 rounded-lg p-4">
                <ul class="space-y-2">
                    @foreach($missingFields as $field => $label)
                        <li class="flex items-center text-sm">
                            <svg class="w-4 h-4 text-error mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            <span class="text-gray-700">{{ $label }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <div class="flex justify-center">
            @if($user->hasRole('patient'))
                <x-splade-link
                    href="{{ route('patient.profile.edit') }}"
                    class="btn btn-primary btn-lg"
                >
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    Complete Profile Now
                </x-splade-link>
            @elseif($user->hasRole('employee'))
                <x-splade-link
                    href="{{ route('employee.profile.edit') }}"
                    class="btn btn-primary btn-lg"
                >
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    Complete Profile Now
                </x-splade-link>
            @elseif($user->hasRole('agent'))
                <x-splade-link
                    href="{{ route('agent.profile.edit') }}"
                    class="btn btn-primary btn-lg"
                >
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    Complete Profile Now
                </x-splade-link>
            @endif
        </div>

        <div class="mt-4 text-xs text-gray-500 text-center">
            <strong>Note:</strong> You cannot access other features until your profile is complete.
        </div>
    </div>
</div>
@endif