@props(['user'])

@if(!$user->hasMedicalQuestionnaire() && !$user->hasTemporarilyDismissedMedicalQuestionnaire())
<div class="modal modal-open" id="medical-questionnaire-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-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-lg font-medium text-gray-900">Complete Your Medical Questionnaire</h3>
                <p class="text-sm text-gray-500">Help us provide better care by completing your medical questionnaire.</p>
            </div>
        </div>

        <div class="mb-6">
            <div class="alert alert-info 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span><strong>Optional:</strong> Completing your medical questionnaire helps us provide personalized care.</span>
            </div>

            <p class="text-sm text-gray-700 mb-4">
                Your medical questionnaire helps our healthcare providers understand your health history and provide better, more personalized care.
            </p>

            <div class="bg-base-200 rounded-lg p-4">
                <h4 class="font-semibold text-gray-900 mb-2">Benefits of completing your questionnaire:</h4>
                <ul class="space-y-1 text-sm text-gray-700">
                    <li class="flex items-center">
                        <svg class="w-4 h-4 text-success mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>Faster consultation appointments</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 text-success mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>More accurate treatment recommendations</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 text-success mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>Better understanding of your health needs</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 text-success mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>Improved medication safety</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-3">
            @if($user->hasRole('patient'))
                <x-splade-link
                    href="{{ route('patient.medical-questionnaires.create') }}"
                    class="btn btn-primary flex-1"
                >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    Complete Questionnaire
                </x-splade-link>
            @elseif($user->hasRole('employee'))
                <x-splade-link
                    href="{{ route('employee.medical-questionnaires.create') }}"
                    class="btn btn-primary flex-1"
                >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    Complete Questionnaire
                </x-splade-link>
            @endif

            <x-splade-link
                href="{{ route('medical-questionnaire.dismiss') }}"
                method="POST"
                class="btn btn-ghost flex-1"
            >
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Remind Me Later
            </x-splade-link>
        </div>

        <div class="mt-4 text-xs text-gray-500 text-center">
            This reminder will be shown again in 24 hours. You can complete the questionnaire anytime from your dashboard.
        </div>
    </div>
</div>
@endif