@extends('layouts.admin')
@push('styles')
    <link href="{{ asset('assets/build/css/virtual-select.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/build/css/tooltip.min.css') }}" rel="stylesheet">
@endpush

@push('script')
    <script src="{{ asset('assets/build/js/virtual-select.min.js') }}"></script>
    <script src="{{ asset('assets/build/js/tooltip.min.js') }}"></script>
@endpush

@section('content')
    <div>
        <livewire:admin.counter.index :location_id="$location_id" />
    </div>
@endsection

<script>
    document.addEventListener("DOMContentLoaded", () => {        
        const addDropdownDivToDomAndReturnId = () => {
            const newid = 'div_' + Math.floor(Math.random() * (1000000 - 5000 + 1) + 5000);
            const containerSelector = 'dropdown_container';
            const container = document.getElementById(containerSelector);
            container.replaceChildren();
            let newDropdownDiv = document.createElement("div");
            newDropdownDiv.setAttribute('id', newid);
            newDropdownDiv.style["min-width"] = "20vw";
            newDropdownDiv.classList.add("d-flex");
            newDropdownDiv.classList.add("justify-content-end");
            container.appendChild(newDropdownDiv);
            return newid;
        };

        const renderDropdown = (component) => {
            if (component.name === "admin.counter.index") {
                const divid = addDropdownDivToDomAndReturnId();
                const selector = '#' + divid;
                VirtualSelect.init({
                    ele: selector,
                    options: component.data.userLocations,
                    labelKey: 'mnemonic',
                    valueKey: 'id',
                    multiple: false,
                    search: true,
                    selectedValue: component.data.selectedLocationId,
                    placeholder: 'Alege locația',
                    markSearchResults: true,
                    silentInitialValueSet: true,
                    emptyValue: [],
                    additionalClasses: 'col-md-6 col-sm-6',
                    noOptionsText: 'Nu mai există locații disponibile.',
                    required: true,
                    hideClearButton: true,
                    position: 'bottom right'
                });
                $(selector).off('change')
                    .off('change')
                    .on('change', (event) => {
                        component.set('selectedLocationId', event.target.value);
                    });

            }
        };

        Livewire.hook('component.initialized', (component) => {
            renderDropdown(component);
        });

        Livewire.hook('message.processed', (el, component) => {
            renderDropdown(component);
        });
    });
</script>