@props(['question', 'isDisable'])

<div class="group w-full rounded-lg bg-white p-5 md:p-6 border-black/10 border-solid border my-5 text-left">
    <label class="font-medium text-base block mb-2">{!!$question->question!!} @if($question->required)<sup class="text-red-500">*</sup>@endif</label>

    @if($question->options)
        @foreach ($question->options as $option)
          
            <div class="flex items-center py-1.5">
                <input @if($isDisable) disabled="{{ $isDisable }}" @endif id="answers.{{$question->id}}.input.{{$option->id}}" type="radio" name="answers.{{$question->id}}" value="{{$option->id}}" wire:model='answers.radio.{{$question->id}}' class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded-full !ring-0 checked:bg-[#8d2424] focus:bg-[#8d2424] checked:focus:bg-[#8d2424] checked:hover:bg-[#8d2424]">
                <label for="answers.{{$question->id}}" class="ml-2 text-sm font-medium text-gray-900">{!!$option->option!!}</label>
            </div>
        
        @endforeach
    @endif
   

    @if($errors->has("questions$question->id"))          
        <div class=" group-[&.has-error]:block pl-8 text-red-500 text-sm relative mt-3">
            <svg class="absolute left-0 top-0 fill-red-500 w-[20px] h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
            </svg>
            {{ $errors->first("questions$question->id") }}
        </div>
    @endif
</div>