@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
<div class="xcomponenetr">
    <div class="page-title">
        <div class="title_left">
            <h3>Adaugă Scenariu</h3>
        </div>
        <div class="title_right">
            <div class="col-md-5 col-sm-5  form-group pull-right top_search">
                <a href="{{ route('scenarios.index', [
                    'location_id' => $location->id,
                ]) }}"
                    class="btn btn-primary float-right">
                    <span class="fa fa-chevron-left"></span> Înapoi la Scenarii</a>
            </div>
        </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">
                    <h2>Administrează Scenarii <small>Creează Scenariu</small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    @csrf
                    <div id="scenarioDetails">
                        <div class="x_title">
                            <h2>Detalii scenariu </h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="item form-group">
                            <p class="control-label col-md-3 col-sm-3 label-align">Locația <span
                                    class="required">*</span></p>
                            <div class="col-md-6 col-sm-6 ">
                                <select disabled name="location_id" id="location_id" class="form-control">
                                    <option value="{{ $location->id }}">{{ $location->mnemonic }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="col-form-label col-md-3 col-sm-3 label-align" for="scenario_name">Nume
                                <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 ">
                                <input type="text" id="scenario_name" wire:model="scenario_name"
                                    class="form-control">
                                @error('scenario_name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="col-form-label col-md-3 col-sm-3 label-align" for="scheduled_for">Data
                                activării
                                <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 ">
                                <input required type="date" id="scheduled_for" wire:model="scheduled_for"
                                    class="form-control" min="{{ $lowestDate }}" {{ $isFirst ? 'disabled' : '' }}>
                                @error('scheduled_for')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="item form-group">
                            <label for="id_waiting_alert_time">Trimite automat alertă când timpul
                                mediu de așteptare este mai mare de (minute) &nbsp; </label>
                            <input wire:key="waiting_alert_time" id="id_waiting_alert_time" type='number'
                                wire:model="waiting_alert_time" style="max-width: 50px;text-align: end;" />
                            @error('waiting_alert_time')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                    <div class="ln_solid"></div>
                    <div id="counters">
                        <div class="x_title">
                            <h2>
                                Ghișee
                            </h2>
                            <div class="clearfix"></div>
                        </div>

                        @foreach ($scenarioCounters as $key => $scenarioCounter)
                            <div class="item form-group">
                                <div class="row align-items-center mw-20">
                                    <div class="col-6 mx-20">
                                        {{ $key + 1 }}
                                    </div>
                                </div>

                                <livewire:admin.scenario.internal.counter-form :location_id="$location->id" :index="$key"
                                    :scenarioCounter="$scenarioCounter" :wire:key="$scenarioCounter['gen_id']" :uuid="$scenarioCounter['gen_id']"
                                    :usedCounters="$usedCounters" />

                                <button type="button" class="btn btn-link"
                                    wire:click="removeCounter({{ $scenarioCounter['gen_id'] }})"><span
                                        class="bi bi-minus"></span><small>Șterge Ghișeu</small></button>
                            </div>
                            <div class="ln_solid"></div>
                        @endforeach

                        <button type="button" class="btn btn-link" wire:click="addCounter"><span
                                class="bi bi-plus"></span><small>Adaugă</small></button>
                        <div class="ln_solid"></div>
                        @if ($errors->any())
                            {!! implode('', $errors->all('<small class="text-danger">:message</small></br>')) !!}
                        @endif
                        <div class="item form-group">
                            <div class="col-md-6 col-sm-6 offset-md-3">
                                <button id="save_scenario_button" class="btn btn-success" wire:click="create">Salvează
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const addDropdownDivToDomAndReturnId = (uuid) => {
                const newid = 'div_' + Math.floor(Math.random() * (1000000 - 5000 + 1) + 5000);
                const containerSelector = 'dropdown_container_' + uuid;
                const container = document.getElementById(containerSelector);
                container.replaceChildren();
                let newDropdownDiv = document.createElement("div");
                newDropdownDiv.setAttribute('id', newid);
                newDropdownDiv.style["min-width"] = "50vw";
                container.appendChild(newDropdownDiv);
                return newid;
            };

            const renderDropdown = (component) => {
                if (component.name === "admin.scenario.internal.counter-form") {
                    const divid = addDropdownDivToDomAndReturnId(component.data.uuid);
                    const selector = '#' + divid;
                    VirtualSelect.init({
                        ele: selector,
                        options: component.data.availableCounters,
                        labelKey: 'counter_name',
                        valueKey: 'id',
                        multiple: true,
                        selectedValue: (component.data.selectedCounters || []),
                        placeholder: 'Alege ghișeele',
                        showValueAsTags: true,
                        silentInitialValueSet: true,
                        emptyValue: [],
                        additionalClasses: 'col-md-6 col-sm-6',
                        noOptionsText: 'Nu mai există ghișee disponibile.',
                        search: true,
                        selectAllOnlyVisible: true, // Select all only visible options
                    });
                    $(selector)
                        .off('change')
                        .on('change', (event) => {
                            component.set('selectedCounters', event.target.value);
                        });

                }
            };

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

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