@push('styles')
    <style>
        .search-list:hover {
            color: white;
            background: blueviolet;
        }
    </style>
@endpush

<div class="card mt-3">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col">
                @if ($building_id)
                    <h4 class="card-title">@lang('building.page.edit')</h4>
                @else
                    <h4 class="card-title">@lang('building.page.add')</h4>
                @endif

            </div>
            <div class="col-auto">
                <button wire:click="list" class="btn btn-primary">@lang('common.btn.list')</button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-6">
                        <x-ui-kit.form-input type="text" field="building.name" label="building.lbl.name" />
                        <div wire:ignore>
                            <label for="country" class="mb-2">@lang('building.lbl.country')</label>
                            <select wire:model.lazy="building.country_id" name="country_id"
                                class="form-select @error('building.country_id') is-invalid @enderror" id="country_id">
                                <option value="">@lang('common.lbl.select')</option>
                                @foreach ($data['countries'] as $key => $country)
                                    <option {{ $building->country_id == $key ? 'selected' : '' }}
                                        value="{{ $key }}">{{ $country }}</option>
                                @endforeach
                            </select>
                        </div>
                        @if ($errors->has('building.country_id'))
                            <p class="text-danger invalid-custom">{{ $errors->first('building.country_id') }}</p>
                        @endif
                        <x-ui-kit.form-input type="text" field="building.city" label="building.lbl.city" />
                        <x-ui-kit.form-input type="text" field="building.no_of_apartments"
                            label="building.lbl.no_of_apartments" />
                        <x-ui-kit.form-input type="text" field="building.no_of_lifts"
                            label="building.lbl.no_of_lifts" />
                    </div>

                    <div class="col-lg-6">
                        @if ($building_id)
                            <x-ui-kit.form-input type="text" field="building.code" label="building.lbl.code"
                                disabled />
                        @endif
                        <x-ui-kit.form-input type="text" field="building.no_of_stairs"
                            label="building.lbl.no_of_stairs" />
                        <x-ui-kit.form-input type="text" field="building.no_of_storeys"
                            label="building.lbl.no_of_storeys" />
                        <x-ui-kit.form-input type="text" field="building.units_per_floor"
                            label="building.lbl.units_per_floor" />

                        <div class="mb-3">
                            <x-ui-kit.label for="measurement_unit" label="building.lbl.measurement_unit"
                                class="mb-3" />
                            <div class="col-md-12">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <x-ui-kit.form-radio field="building.measurement_unit"
                                            id="building.measurement_unit_m" label="building.lbl.measurement_unit_m"
                                            class="pi-item-type-rating" inline="true" :display-error="false"
                                            value="m" />
                                        <x-ui-kit.form-radio field="building.measurement_unit"
                                            id="building.measurement_unit_ft" label="building.lbl.measurement_unit_ft"
                                            class="pi-item-type-query" inline="true" :display-error="false"
                                            value="ft" />
                                        <x-ui-kit.input-error field="building.measurement_unit" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="mb-3">
                        <label for="status" class="mb-2">@lang('building.lbl.status')</label>
                        <div class="form-check form-switch form-switch-primary">
                            <input wire:model.lazy="building.status"
                                class="form-check-input @error('building.status') is-invalid @enderror" type="checkbox"
                                id="building.status">
                            <label class="form-check-label" for="building.status">
                                @if ($building['status'])
                                    @lang('building.lbl.active')
                                @else
                                    @lang('building.lbl.deactive')
                                @endif
                            </label>
                        </div>
                    </div>
                    <x-ui-kit.input-error field="building.status" />
                    <x-ui-kit.form-textarea field="building.address" label="building.lbl.address" rows="5" />
                    <div wire:ignore>
                        <x-ui-kit.form-textarea field="building.summary" label="building.lbl.summary" />
                    </div>
                    @if ($errors->has('building.summary'))
                        <p class="text-danger">{{ $errors->first('building.summary') }}</p>
                    @endif
                </div>
            </div>

            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-subtitle font-14 mb-2 font-weight-bold">@lang('building.section.custom_fields')</h6>
                        <hr>
                        @foreach ($meta_fields as $key => $serial)
                            @php
                                $meta_field_key = 'meta_key.' . $serial;
                                $meta_field_value = 'meta_value.' . $serial;
                            @endphp
                            <!-- Custom field  -->
                            <div class="custom-field-container">
                                <div class="row">
                                    <div class="col-md-6 col-sm-6 col-xs-10">
                                        <x-ui-kit.form-input type="text" field="{{ $meta_field_key }}"
                                            wire-modifier="" :display-label="false" class="search-field"
                                            placeholder="building.lbl.field_name" />
                                        <div class="autocomplete-list">
                                            <div class="list-group ">
                                                @if (isset($meta_results[$serial]))
                                                    @foreach ($meta_results[$serial] as $index => $result)
                                                        <div class="list-group-item list-group-item-action"
                                                            wire:click="selectMetaResult('{{ $result['building_key'] }}', '{{ $serial }}')">
                                                            {{ Str::title(Str::replace('_', ' ', $result['building_key'])) }}
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-10">
                                        <div class="row">
                                            <div class="col-md-11 col-sm-11">
                                                <x-ui-kit.form-input type="text" field="{{ $meta_field_value }}"
                                                    :display-label="false" placeholder="building.lbl.field_value" />
                                            </div>
                                            <div class="col-md-1 col-sm-1">
                                                <button
                                                    class="btn btn-danger btn-icon-circle btn-icon-circle-sm custom-field-del-btn"
                                                    wire:click="removeMetaField({{ $key }})"><i
                                                        class="fas fa-minus-circle"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End custom field  -->
                        @endforeach
                        <div class="col-auto">
                            <button wire:click.prevent="addMetaField({{ $i }})"
                                class="btn btn-primary">@lang('common.btn.new_field')</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="card-footer">
        <div class="row mt-2 mb-2 align-items-center">
            <div class="col">

            </div>
            <div class="col-auto">
                @if ($building_id)
                    <button type="button" wire:loading.attr="disabled" wire:click="store"
                        class="btn btn-primary"><i wire:loading wire:target="store, storeAnother"
                            class="fa fa-spin fa-spinner"></i>
                        @lang('common.btn.update')</button>
                @else
                    <button type="button" wire:loading.attr="disabled" wire:click="store"
                        class="btn btn-primary xs-btn-pxy"><i wire:loading wire:target="store"
                            class="fa fa-spin fa-spinner"></i>@lang('common.btn.submit')</button>
                    <button type="button" wire:loading.attr="disabled" wire:click="storeAnother"
                        class="btn btn-outline-primary xs-btn-pxy"><i wire:loading wire:target="storeAnother"
                            class="fa fa-spin fa-spinner"></i>@lang('common.btn.submit_another')</button>
                @endif
                <button type="button" wire:click="list"
                    class="btn btn-outline-danger xs-btn-pxy">@lang('common.btn.cancel')</button>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script>
        var country_selector = new Selectr("#country_id");
        document.addEventListener('reset-country-dropdown-text-editor', function(event) {
            country_selector.reset();
            const clearEditor = tinymce.get('building.summary');
            if (clearEditor) {
                clearEditor.setContent('');
            }
        });
        var myEditor = tinymce.init({
            selector: '#building\\.summary',
            plugins: ['advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'code', ],
            toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
            color_default_foreground: '#000000',
            setup: function(editor) {
                editor.on('change', function() {
                    @this.set('building.summary', editor.getContent());
                    // window.livewire.emit('validateEditor', editor.getContent());
                });
                editor.on('init', () => {
                    editor.getContainer().style.transition =
                        'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
                });
                editor.on('focus', () => {
                    editor.getContainer().style.boxShadow = '0 0 0 .2rem rgba(0, 123, 255, .25)';
                    editor.getContainer().style.borderColor = '#80bdff';
                });
                editor.on('blur', () => {
                    editor.getContainer().style.boxShadow = '';
                    editor.getContainer().style.borderColor = '';
                });
            },
            menubar: false,
            branding: false,
            height: 350,
            resize: 'both'
        });
    </script>
@endpush