<div>
    <x-vuexy-admin::offcanvas.basic :id="$offcanvasId" :tag-name="$tagName">
        <x-vuexy-admin::form :id="$formId" :mode="$mode" wireSubmit="onSubmit" actionPosition="both">
            <x-slot name="actions">
                <x-vuexy-admin::button.offcanvasButtons :mode="$mode" :tagName="$tagName" />
            </x-slot>
            <x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="id" />
            <x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="mode" />
            <x-vuexy-admin::form.select :uid="$uniqueId" model="store_id" label="Sucursal" placeholder="Selecciona una sucursal" :options="$store_options" />
            <div class="row">
                <x-vuexy-admin::form.input :uid="$uniqueId" model="code" label="Código de centro de trabajo" icon="ti ti-tag" parentClass="col-md-8" />
            </div>
            <x-vuexy-admin::form.input :uid="$uniqueId" model="name" label="Nombre del centro de trabajo" />
            <x-vuexy-admin::form.textarea :uid="$uniqueId" model="description" label="Descripción" />
            <hr>
            <x-vuexy-admin::form.select :uid="$uniqueId" model="manager_id" label="Gerente" placeholder="Selecciona un gerente" :options="$manager_options" class="select2 form-select" />
            <x-vuexy-admin::form.input :uid="$uniqueId" model="tel" label="Teléfono" icon="ti ti-phone" />
            <x-vuexy-admin::form.input :uid="$uniqueId" model="tel2" label="Teléfono alternativo" icon="ti ti-phone" />
            <hr>
            <x-vuexy-admin::form.textarea :uid="$uniqueId" name="location_search" label="Dirección de búsqueda" placeholder="Buscar dirección" rows="2" button-icon="ti ti-map-pin-search" onClickButton="clearCoordinates()" />
            <div class="row">
                <x-vuexy-admin::form.input :uid="$uniqueId" model="lat" label="Latitud" type="number" step="0.000001" max="90" min="-90" parentClass="col-5" align="center" size="small" />
                <x-vuexy-admin::form.input :uid="$uniqueId" model="lng" label="Longitud" type="number" step="0.000001" max="180" min="-180" parentClass="col-5" align="center" size="small" />
                <div class="col-2 mt-5 !pl-0">
                    <x-vuexy-admin::button.basic variant="secondary" outline size="sm" icon="ti ti-map-pin-off ti-md" onClick="clearCoordinates()" />
                </div>
            </div>
            <div style="height:400px; z-index: 1;" id="locationMap_{{ $uniqueId }}"></div>
            <hr>
            {{ $status }}
            <x-vuexy-admin::form.checkbox :uid="$uniqueId" model="status" label="Activo" switch=true />
        </x-vuexy-admin::form>
    </x-vuexy-admin::offcanvas.basic>
</div>

@push('page-script')
    <script>
        // Evento para inicializar el formulario cuando se carga la página
        window.addEventListener("DOMContentLoaded", () => {
            const clearCoordinates = () => {
                console.log('clearCoordinates');
                // Aqui coloca la logica para limpiar la ubicación
                //LeafletMapHelper.removeMarker();
            }

            /**
             * Inicializa el formulario de centro de trabajo
             */
            const initializeWorkCenterForm = () => {
                const initializeSelect2 = () => {
                    const select2Selectors = {
                        [`#manager_id_{{ $uniqueId }}`]: {
                            placeholder: 'Selecciona un gerente',
                            onSelect: (id) => {
                                @this.set('updateManagerId', id, false);
                            },
                            onClear: () => {
                                @this.set('updateManagerId', null, false);
                            }
                        }
                    };

                    const parent = $('#storeWorkCenterForm');

                    $.each(select2Selectors, (selector, config) => {
                        const $element = parent.find(selector);

                        if ($element.length) {
                            $element
                                .select2({
                                    placeholder: config.placeholder,
                                    allowClear: true,
                                    closeOnSelect: false
                                })
                                .on('select2:select', (e) => {
                                    let selectedId = e.params.data.id;

                                    config.onSelect(selectedId);
                                })
                                .on('select2:clear', () => {
                                    config.onClear();
                                });
                        }
                    });
                };

                const initializeLocationCard = () => {
                    const locationInputs = {
                        search: '#location_search_{{ $uniqueId }}',
                        btnSearch: '#btn_search_{{ $uniqueId }}',
                        lat: '#lat_{{ $uniqueId }}',
                        lng: '#lng_{{ $uniqueId }}',
                        btnClear: '#storeWorkCenterForm .btn-clear-coords',
                        mapId: 'locationMap_{{ $uniqueId }}',
                    }

                    LeafletMapHelper.initializeMap(locationInputs, mode, @this);
                }


                const mode = @this.get('mode')?? 'create';

                // Inicializa los select2
                initializeSelect2();

                // Inicializa el card de ubicación
                initializeLocationCard(mode);
            }


            var myOffcanvas = document.getElementById('{{ $offcanvasId }}')

            myOffcanvas.addEventListener('show.bs.offcanvas', function () {
                initializeWorkCenterForm();
            });
        });
    </script>
@endpush