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

@props([
    'label',
    'id',
    'name',
    'required' => false,
    'disabled' => false,
    'colClass' => 'col-md-6',
    'errorMessage' => null,
    'placeholder' => 'Select option'
])

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

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

        {{-- Actual Content --}}
        <select
            class="form-select actual-content"
            id="{{ $id }}"
            name="{{ $name }}"
            @if($required) required @endif
            @if($disabled) disabled @endif
            {{ $attributes }}
        >
            <option value="" selected disabled>{{ $placeholder }}</option>
            {{ $slot }}
        </select>

        <div class="select-loading-spinner" id="{{ $id }}_loading">
            <div class="spinner-border spinner-border-sm text-primary" role="status">
                <span class="visually-hidden">{{ __('Loading...') }}</span>
            </div>
        </div>
    </div>

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