@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 wire-key="{{ $location?->mnemonic }}">
        <div class="page-title">
            <div class="title_left">
                <h3>Situație bonuri / {{ $location?->mnemonic ?? null }} </h3>
            </div>
            <div class="title_right">
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 ">
                <div class="x_panel">
                    <div class="x_title">
                        <div class="row justify-content-between">
                            <div>
                                <h2>Ziua: <small>{{ $currentDate }}</small></h2>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <div class="item form-group">
                            <div id="dropdown_container" wire:ignore class="col-md-4_col-sm-6 ml-2">
                            </div>
                        </div>
                    </div>
                    <div class="x_content">
                        <table class="table table-bordered">
                            <thead style="text-align: center;">
                                <tr>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody style="text-align: left;">
                                @foreach ($data_collection as $data)
                                    <tr>
                                        @if (is_array($data['value']))
                                            <th scope="row" class="table-secondary">{{ $data['label'] }}</th>
                                            <td class="table-secondary"></td>
                                            @foreach ($data['value'] as $key => $val)
                                                <tr class="table-warning">
                                                    <th scope="row">{{ $key }}</th>
                                                    <td>{{ $val }}</td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <th scope="row">{{ $data['label'] }}</th>
                                            <td>{{ $data['value'] }}</td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div wire:loading class="x_content" style="width:calc(100% -230px);height:calc(100% - 140px)">
                        <h1 style="position:relative;top:20%;left:calc(50% - 115px)">Se încarcă ... <h1>
                    </div>
                </div>
            </div>
        </div>
        <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.ticket-monitoring") {
                        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) => {
                                if (!event.target.value || isNaN(event.target.value)) {
                                    return;
                                }
                                window.location = '/admin/ticket-monitoring/' + event.target.value;
                            });
                    }
                };

                const manualComponent = {
                    name: "admin.ticket-monitoring",
                    data: {
                        userLocations: @js($userLocations),
                        selectedLocationId: @js($selectedLocationId)
                    }
                };
                renderDropdown(manualComponent);
            });

            const checkTickets = () => {
                const location_id = @js($selectedLocationId);
                const totalCount = @js($totalCount);
                const finalized = @js($finalized);
                const requestData = {
                    'location_id': location_id,
                    'totalCount': totalCount,
                    'finalized': finalized,
                };

                $.ajax({
                    url: "{{ route('api/locations/monitoring') }}",
                    type: 'POST',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(requestData),
                }).fail(function() {
                    location.reload();
                });

            };

            const interval = setInterval(checkTickets, 10000);
        </script>
    </div>
@endsection