{{-- Area --}}
{{--<div class="form-group">
    <x-select2
            id="areaId"
            :options="$areaList->pluck('name', 'id')->toArray()"
            :selected="$areaId"
            wire:model="areaId"
            placeholder="-- Select Area --"
            dropdownParent="#siteModal"
    />
    @error('areaId') <span class="text-danger">{{ $message }}</span> @enderror
</div>--}}


@props([
'id',
'options' => [],
'selected' => null,
'placeholder' => null,
'dropdownParent' => null,
])

@once
    @push('scripts')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    @endpush
@endonce

<div wire:ignore>
    <select
            id="{{ $id }}"
            data-init-select2
            data-livewire-model="{{ $attributes->get('wire:model') }}"
            data-placeholder="{{ $placeholder }}"
            @if($dropdownParent) data-dropdown-parent="{{ $dropdownParent }}" @endif
            style="width: 100%">
        @if ($placeholder)
            <option value="">{{ $placeholder }}</option>
        @endif

        @foreach ($options as $key => $option)
            @php
                $value = is_array($option) ? ($option['id'] ?? '') : $key;
                $label = is_array($option) ? ($option['text'] ?? '') : $option
            @endphp
            <option value="{{ $value }}" @selected((string) $selected=== (string) $value)>
                {{ $label }}
            </option>
        @endforeach
    </select>
</div>