{{-- Form Input Component for School Profile Modal (spm) --}}

@props([
    'label',
    'id',
    'name',
    'type' => 'text',
    'required' => false,
    'readonly' => false,
    'placeholder' => '',
    'maxlength' => null,
    'min' => null,
    'max' => null,
    'pattern' => null,
    'colClass' => 'col-md-6',
    'errorMessage' => null,
    'helpText' => null
])

<div class="{{ $colClass }} ">
    <label for="{{ $id }}" class="form-label fw-semibold">
        {{ $label }}
        @if($required)
            <span class="text-danger">*</span>
        @endif
    </label>

    {{-- Skeleton --}}
    <div class="skeleton skeleton-input"></div>

    {{-- Actual Content --}}
    <input
        type="{{ $type }}"
        class="form-control actual-content"
        id="{{ $id }}"
        name="{{ $name }}"
        placeholder="{{ $placeholder }}"
        @if($maxlength) maxlength="{{ $maxlength }}" @endif
        @if($min) min="{{ $min }}" @endif
        @if($max) max="{{ $max }}" @endif
        @if($pattern) pattern="{{ $pattern }}" @endif
        @if($required) required @endif
        @if($readonly) readonly @endif
        {{ $attributes }}
    >

    @if($helpText)
        <small class="form-text text-muted actual-content">{{ $helpText }}</small>
    @endif

    @if($errorMessage)
        <div class="invalid-feedback">{{ $errorMessage }}</div>
    @endif
</div>