@push('css')
    <style>
        .ts-control {
            background-color: rgb(231, 239, 231);
            border: 1px solid #ccccd3;
            padding: 0.35rem 0.75rem;
            width: 100%;
            border-radius: 5px;
            font-size: 12px;
        }

        .ts-dropdown .ts-dropdown-content {
            /* background-color: rgb(231, 239, 231); */
            font-size: 12px;
            max-height: 330px;
            color: black;
        }

        .ts-wrapper .single .input-active .ts-control .has-items {
            background-color: rgb(231, 239, 231);
            font-size: 12px;
        }

        .full .ts-control {
            background-color: rgb(231, 239, 231);
            font-size: 12px;
        }

        .ts-wrapper.single.input-active .ts-control {
            background-color: rgb(231, 239, 231);
            font-size: 12px;
        }

        .py-1 {
            padding-top: 0.05rem !important;
            padding-bottom: 0.05rem !important;
        }

        /* .ts-dropdown .ts-dropdown-content span {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        color: black !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    } */

        .option:nth-child(odd) {
            background-color: rgb(235 235 235) !important;
        }

        .option:nth-child(even) {
            background-color: rgb(231, 239, 231) !important;
        }

        .ts-dropdown .active {
            background-color: #ffff !important;

        }

        .invalid-feedback {
            display: block;
        }
    </style>
@endpush

<div>
    {{-- @if ($error_message)
        <style>
            .{{ $select_id }}_class .ts-control {
                background-color: rgb(235, 161, 158) !important;
                color: #333333 !important;
            }
        </style>
    @else
        <style>
            .{{ $select_id }}_class .ts-control {}
        </style>
    @endif --}}

    <div wire:ignore class="{{ $select_id }}_class">
        <select type="text" wire:model.change="value" id="{{ $select_id }}_select"
            @if ($disabled == 'true') style="background-color: rgb(184, 35, 35); color:#000000; border: 1px solid #babac0; padding: 0.3rem 0.75rem;"
            disabled @endif
            placeholder="{{ $placeholder }}"></select>
        <span class="invalid-feedback error_msg" id="{{ $select_id }}_error_msg"></span>
    </div>
</div>

@script
    <script>
        $errorSpan{{ $select_id }} = document.getElementById("{{ $select_id }}_error_msg");

        $selectTom{{ $select_id }} = new TomSelect(document.getElementById("{{ $select_id }}_select"), {
            valueField: 'id',
            labelField: 'name',
            searchField: ['id', 'name', 'name_bn', 'code'],
            maxOptions: $wire.max_options,
            loadThrottle: 800,
            options: $wire.data,
            load: (query, callback) => {
                if (!$wire.searchable) return callback();
                if (!query.length) return callback();
                $wire.$call('loadOptionData', query).then(data => {
                    callback(data);
                });
            },
            render: {
                option: function(item, escape) {
                    return `<div class="py-1 d-flex">
                            <div>
                                <div>
                                    <span class="text-muted"> ${ escape(item.name) }</span>
                                </div>
                            </div>
                        </div>`;
                },
                item: function(item, escape) {
                    return `<div>${ escape(item.name) }</div>`;
                }
            }
        });

        $selectTom{{ $select_id }}.on('change', () => {
            $errorSpan{{ $select_id }}.style.display = "none";
        });

        Livewire.on('{{ $select_id }}_set_option', () => {
            $selectTom{{ $select_id }}.clear();
            $selectTom{{ $select_id }}.clearOptions();
            $selectTom{{ $select_id }}.addOption($wire.data);
        })

        Livewire.on('{{ $select_id }}_set_value', () => {
            $selectTom{{ $select_id }}.clear();
            $selectTom{{ $select_id }}.setValue($wire.value);
            $errorSpan{{ $select_id }}.style.display = "none";
        })

        Livewire.on('tom_select_set_value', (event) => {
            if (typeof event[0]['{{ $name }}'] != "undefined") {
                if (typeof event[0]['{{ $name }}']['value'] != "undefined") {
                    $selectTom{{ $select_id }}.clear();
                    $selectTom{{ $select_id }}.setValue(event[0]['{{ $name }}']['value']);
                    $errorSpan{{ $select_id }}.style.display = "none";
                    if (typeof event[0]['{{ $name }}']['options'] != "undefined") {
                        $selectTom{{ $select_id }}.addOption(typeof event[0]['{{ $name }}'][
                            'options'
                        ]);
                    }
                } else {
                    $selectTom{{ $select_id }}.clear();
                    $selectTom{{ $select_id }}.setValue(event[0]['{{ $name }}']);
                    $errorSpan{{ $select_id }}.style.display = "none";
                }
            }
        })

        Livewire.on('{{ $select_id }}_set_reset', () => {
            $selectTom{{ $select_id }}.clear();
            $selectTom{{ $select_id }}.setValue($wire.value);
            $errorSpan{{ $select_id }}.style.display = "none";
        })

        Livewire.on('alert', (event) => {
            $errorDatas = event.data.validation_errors;

            if ($errorDatas) {
                Object.keys($errorDatas).forEach(key => {
                    if (key === $wire.name) {
                        $errorSpan{{ $select_id }}.style.display = "inline";
                        $errorSpan{{ $select_id }}.innerText = $errorDatas[key][0];
                    }
                });
            }
        })
    </script>
@endscript