<div>
    @if ($showModal)
        <div class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
            <div class="bg-white rounded-xl w-full max-w-md p-6 relative shadow-xl">

                <button wire:click="close"
                    class="absolute right-3 top-3 text-gray-400 hover:text-black text-xl">&times;</button>

                <h3 class="text-xl font-semibold mb-4 text-center">Apply for this Job</h3>

                @if (!$this->submitted)

                    <form wire:submit.prevent="submit" class="space-y-4">

                        <input type="text" wire:model.defer="name" placeholder="Your Name *"
                            class="w-full border-b py-2 focus:outline-none">

                        @error('name')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror

                        <input type="email" wire:model.defer="email" placeholder="Your Email *"
                            class="w-full border-b py-2 focus:outline-none">

                        @error('email')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror

                        <input type="tel" wire:model.defer="phone" placeholder="10-digit Mobile Number"
                            maxlength="10" oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                            class="w-full border-b py-2 focus:outline-none">

                        @error('phone')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror

                        <div class="relative group">

                            <div
                                class="border-2 border-dashed border-blue-400 rounded-xl p-6 text-center bg-gradient-to-br from-blue-50 to-white hover:from-blue-100 hover:to-white transition-all duration-300 shadow-sm hover:shadow-md">

                                <label for="resumeUpload"
                                    class="cursor-pointer flex flex-col items-center justify-center gap-3 text-blue-700 font-semibold">

                                    <!-- ICON CIRCLE -->
                                    <div
                                        class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center group-hover:scale-110 transition">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-600"
                                            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M7 18h10M7 14h10M7 10h6M5 4h10l4 4v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" />
                                        </svg>
                                    </div>

                                    <!-- TEXT -->
                                    <span class="text-base">Upload Your Resume</span>
                                    <span class="text-xs text-gray-500">(PDF, DOC, DOCX supported)</span>
                                    <span class="text-xs text-gray-400">Max size 2MB</span>
                                </label>

                                <input type="file" wire:model="resume" id="resumeUpload" class="hidden"
                                    accept=".pdf,.doc,.docx">

                                <!-- FILE SELECTED -->
                                @if ($resume)
                                    <div
                                        class="mt-4 flex items-center justify-center gap-2 text-green-600 text-sm font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                        </svg>
                                        {{ $resume->getClientOriginalName() }}
                                    </div>
                                @endif

                                @error('resume')
                                    <span class="text-red-500 text-sm mt-3 block">{{ $message }}</span>
                                @enderror

                            </div>

                        </div>

                        @if ($resumeScore !== null)
                            <div class="bg-gray-100 p-3 rounded text-sm">
                                <strong>Resume Score:</strong> {{ $resumeScore }}/100<br>
                                {{ $resumeFeedback }}
                                <div class="w-full bg-gray-300 rounded h-2 mt-2">
                                    <div class="bg-green-500 h-2 rounded" style="width: {{ $resumeScore }}%"></div>
                                </div>
                            </div>
                        @endif

                        <button type="submit" class="w-full bg-black text-white py-3 rounded hover:bg-gray-900"
                            wire:loading.attr="disabled" wire:target="submit">

                            <span wire:loading.remove wire:target="submit">Submit Application →</span>
                            <span wire:loading wire:target="submit">Submitting...</span>

                        </button>
                    </form>
                @else
                    <div class="text-center py-10">

                        <div class="flex justify-center mb-3">
                            <svg class="w-16 h-16 text-green-600" fill="none" stroke="currentColor" stroke-width="2"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M9 12l2 2 4-4m7 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>

                        <h3 class="text-2xl font-semibold text-green-600">Thank You!</h3>

                        <p class="mt-3 text-gray-600">
                            Your application has been submitted successfully.<br>
                            Our HR team will contact you soon.
                        </p>
                        <button wire:click="close" class="mt-6 px-6 py-2 bg-black text-white rounded hover:bg-gray-900">
                            Close
                        </button>
                    </div>

                @endif

            </div>
        </div>
    @endif
</div>
