@if($profileCompleted<100)
@if($role =="Candidate" )
{{-- <div class="container w-full md:w-1/2 mx-auto my-5"> --}}
<div class="container mx-auto my-5 text-sm">
    <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-blue-700 dark:text-white">Profile Completed</span>
        <span class="text-sm font-medium text-blue-700 dark:text-white">{{ $profileCompleted }}%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-{{ $progressBarClass }} h-2.5 rounded-full" style="width: {{ $profileCompleted }}%"></div>
    </div>
    <div class="text-red-500 dark:text-red-200 my-3 leading-tight">Please complete your profile to increase your chances of placement.</div>
    @foreach ($toComplete as $key => $value)
    @if (($key == "mobile number" || $key == "address" || $key == "marital status" || $key == "date of birth" || $key == "gender") && !$value)
    {{-- <a href="{{ route('candidate.profile.show') }}" class="block text-blue-500 m-2"> --}}
       <i class="fa fa-exclamation-circle text-red-500 dark:text-red-200 mr-2"></i>Add {{ (!$toComplete[$key]) ? $key : '' }}.
    {{-- </a> --}}
    @endif
    {{-- @if ($key == "address" && !$value)
    <a href="{{ route('candidate.profile.edit') }}" class="block text-blue-500 m-2">
       <i class="fa fa-exclamation-circle text-red-500 mr-2"></i>Please add your address
    </a>
    @endif --}}
    @if ($key == "coverLetter" && !$value)
    <a href="{{ route('candidate.make.cover.letter') }}" class="block text-blue-500 m-2">
       <i class="fa fa-exclamation-circle text-red-500 mr-2"></i>Make cover letter.
    </a>
    @endif
    @if ($key == "resume" && !$value)
    <a href="{{ route('candidate.upload.resume') }}" class="block text-blue-500 m-2">
        <i class="fa fa-exclamation-circle text-red-500 mr-2"></i>Upload resume.
    </a>
    @endif
    {{-- @if (!$toComplete1['coverLetter'])
    @endif --}}
    {{-- @endif --}}
    @endforeach
</div>
@elseif($role =="Employer" || $role =="Institute")
<div class="container mx-auto my-5 text-sm">
    <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-blue-700 dark:text-white">Profile Completed</span>
        <span class="text-sm font-medium text-blue-700 dark:text-white">{{ $profileCompleted }}%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-{{ $progressBarClass }} h-2.5 rounded-full" style="width: {{ $profileCompleted }}%"></div>
    </div>
    <div class="text-red-500 my-3 leading-tight">Please fill these details to complete your profile.</div>
    @foreach ($toComplete as $key => $value)
    @if (($key == "mobile number" || $key == "organization name" || $key == "address") && (!$value))
    {{-- <a href="{{ route(strtolower(Auth::user()->role).'.profile.show') }}" class="block text-blue-500 m-2"> --}}
       <i class="fa fa-exclamation-circle text-red-500 mr-2"></i>Add {{ (!$toComplete[$key]) ? $key : '' }}.
       <br>
    {{-- </a> --}}
    @endif
    @endforeach
</div>
@else
<x-alert negative class="container w-full flex justify-center md:w-1/2 mx-auto my-5">
    <form wire:submit.prevent="addRole" action="" method="POST">
        <label class="text-red-500">To complete registration, please select your role carefully, this can't be changed later</label>
        <br>
        @error('role')
        <div class="text-red-500">Required</div>
        @enderror
                            <label for="role_1" class="mb-2 font-medium mr-3">
                                <input type="radio" name="role" id="role_1" value="Candidate" wire:model.defer="role" required>
                                Candidate
                            </label>
                            <label for="role_2" class="mb-2 font-medium mr-3">
                                <input type="radio" name="role" id="role_2" value="Employer" wire:model.defer="role">
                                Employer
                            </label>
                            <label for="role_3" class="mb-2 font-medium">
                                <input type="radio" name="role" id="role_3" value="Institute" wire:model.defer="role">
                                Institute
                            </label>
                            <x-submit>Go</x-submit>
    </form>
</x-alert>
@endif
@else
    <div>
        <div class="flex justify-between mb-1">
            <span class="text-base font-medium text-blue-700 dark:text-white">Profile Completed</span>
            <span class="text-sm font-medium text-blue-700 dark:text-white">{{ $profileCompleted }}%</span>
        </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-{{ $progressBarClass }} h-2.5 rounded-full" style="width: {{ $profileCompleted }}%"></div>
    </div>
</div>
@endif