@props(['selectOptions' => []])

@php

    $classes = "block mt-1 w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-300 focus:ring-opacity-50 shadow-sm rounded";

    if ($readonly)
    {
        $classes .= " ";
        $classes .= "bg-gray-200 text-gray-500";
    }
    if (!empty($class))
    {
        $classes .= " ";
        $classes .= $class; 
    }

@endphp

<div class="mt-4">

    @if ($type !== "select")
        <x-input-label :for="$name" :value="$label" />
        <x-text-input 
            :id="$name"
            :name="$name"
            :wire:model="$name"        
            :type="$type"
            required 
            :value="$value" 
            :step="$step"
            :readonly="$readonly"
            class="{{ $classes }}"
        />
        <x-input-error :messages="$errors->get($name)" class="mt-2" /> 
    @endif
    @if ($type === "select")
        <div class="flex flex-col mt-4">
            <x-input-label class="text-xs text-gray-500" :for="$name" :value="$label" />
            <select 
                class="text-sm mt-1 border-1 border-gray-300 rounded shadow-sm" 
                id="{{ $name }}" name="{{ $name }}" wire:model="{{ $name }}"
            >
                <option value=""></option>
                @foreach($selectOptions as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
            <x-input-error :messages="$errors->get($name)" class="mt-2" /> 
        </div>
    @endif
</div>