<?php
/* @var \Vehica\Widgets\Car\Archive\SearchListingCarArchiveWidget $vehicaCurrentWidget */
/* @var \Vehica\Search\Field\TaxonomySearchField $vehicaSearchField */
global $vehicaSearchField, $vehicaCounter, $vehicaCurrentWidget;
?>
<div class="vehica-results__field vehica-relation-field">
    <vehica-taxonomy-search-field
            :taxonomy="<?php echo htmlspecialchars(json_encode($vehicaSearchField)); ?>"
            :filters="searchFormProps.filters"
            :terms="<?php echo htmlspecialchars(json_encode($vehicaSearchField->getTermsList())); ?>"
            when-empty="<?php echo esc_attr($vehicaSearchField->whenTermEmpty()); ?>"
            :terms-count="searchFormProps.terms"
            :disable-sort="<?php echo esc_attr($vehicaSearchField->disableSort() ? 'true' : 'false'); ?>"
        <?php if ($vehicaSearchField->limitNumberOfVisibleTermsAtStart()) : ?>
            :terms-init-limit="<?php echo esc_attr($vehicaSearchField->getNumberOfVisibleTermsAtStart()); ?>"
        <?php endif; ?>
        <?php if ($vehicaSearchField->disableUntilParentSelected()) : ?>
            :disable-until-parent-selected="true"
        <?php endif; ?>
        <?php if ($vehicaSearchField->sortByCount()) : ?>
            :sort-by-count="true"
        <?php endif; ?>
    >
        <div slot-scope="taxonomyField" :class="{'vehica-active-taxonomy': taxonomyField.selectedTerms.length > 0}">
            <h4 class="vehica-results__field__label">
                <?php echo esc_html($vehicaSearchField->getName()); ?>
            </h4>

            <?php if ($vehicaSearchField->isCheckboxControl()) : ?>
                <div>
                    <div class="vehica-form-button" @click.prevent="taxonomyField.onShowModal">
                        <span v-if="taxonomyField.selectedTermsLabel === ''">
                            <?php echo esc_html($vehicaSearchField->getPlaceholder()); ?>
                        </span>

                        <template v-if="taxonomyField.selectedTermsLabel !== ''">
                            {{ taxonomyField.selectedTermsLabel }}
                        </template>

                        <template v-if="taxonomyField.selectedTerms.length > 0">
                            <span class="vehica-form-button__clear">
                                <i class="fas fa-times" @click.stop="taxonomyField.clearSelection"></i>
                            </span>
                        </template>
                    </div>

                    <template>
                        <portal to="footer">
                            <div v-if="taxonomyField.showModal">
                                <div class="vehica-popup-checkbox">
                                    <div class="vehica-popup-checkbox__inner">
                                        <div class="vehica-popup-checkbox__position">
                                            <div class="vehica-popup-checkbox__top">
                                                <div class="vehica-popup-checkbox__name">
                                                    <?php echo esc_html($vehicaSearchField->getName()); ?>
                                                </div>

                                                <div class="vehica-popup-checkbox__close">
                                                    <div @click.prevent="taxonomyField.onCloseModal"
                                                         class="vehica-close-animated">
                                                        <div class="vehica-close-animated__leftright"></div>
                                                        <div class="vehica-close-animated__rightleft"></div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="vehica-popup-checkbox__middle">
                                                <div
                                                        v-for="term in taxonomyField.allOptions" :key="term.key"
                                                        class="vehica-checkbox"
                                                >
                                                    <input
                                                            :id="term.key"
                                                            @change="taxonomyField.addTerm(term)"
                                                            :checked="term.isSelected"
                                                            type="checkbox"
                                                            :disabled="term.isDisabled"
                                                    >
                                                    <label :for="term.key">
                                                        <span v-html="term.name"></span>

                                                        <?php if ($vehicaSearchField->showTermCount()) : ?>
                                                            <span class="vehica-checkbox__count">({{ term.count }})</span>
                                                        <?php endif; ?>
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="vehica-popup-checkbox__bottom">
                                                <div
                                                        class="vehica-popup-checkbox__clear"
                                                        @click.prevent="taxonomyField.clearSelection"
                                                >
                                                    <?php echo esc_html(vehicaApp('clear_all_string')); ?>
                                                    <span>"<?php echo esc_html($vehicaSearchField->getName()); ?>"</span>
                                                </div>

                                                <button
                                                        class="vehica-button vehica-button--icon vehica-button--icon--check"
                                                        @click.prevent="taxonomyField.onCloseModal"
                                                >
                                                    <?php echo esc_html(vehicaApp('done_string')); ?>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </portal>
                    </template>
                </div>
            <?php elseif ($vehicaSearchField->isSelectControl()) : ?>
                <div v-if="false" class="vehica-form-button">
                    <?php echo esc_html($vehicaSearchField->getPlaceholder()); ?>
                </div>

                <template>
                    <v-select
                            label="name"
                            :options="taxonomyField.options"
                            :value="taxonomyField.getTerm(taxonomyField.selectedTerm)"
                            @input="taxonomyField.setTerm"
                            @search:focus="taxonomyField.onFocus"
                            :append-to-body="false"
                            :disabled="taxonomyField.disableField"
                            placeholder="<?php echo esc_attr($vehicaSearchField->getPlaceholder()); ?>"
                            :selectable="option => option.count > 0"
                        <?php if ($vehicaSearchField->searchable()) : ?>
                            :searchable="true"
                        <?php else : ?>
                            :searchable="false"
                        <?php endif; ?>
                    >
                        <template #option="option">
                            <div class="vehica-option">
                                <span v-html="option.name"></span>

                                <?php if ($vehicaSearchField->showTermCount()) : ?>
                                    <template v-if="option.count">
                                        <span class="vehica-option__count">({{ option.count }})</span>
                                    </template>
                                <?php endif; ?>
                            </div>
                        </template>

                        <template #selected-option="option">
                            <span class="vehica-option-selected" v-html="option.name"></span>
                        </template>

                        <template #no-options="{ search, searching, loading }">
                            <?php echo esc_html(vehicaApp('no_options_string')); ?>
                        </template>
                    </v-select>
                </template>
            <?php elseif ($vehicaSearchField->isMultiSelectControl()) : ?>
                <div v-if="false" class="vehica-form-button">
                    <?php echo esc_html($vehicaSearchField->getPlaceholder()); ?>
                </div>

                <template>
                    <v-select
                            label="name"
                            :options="taxonomyField.options"
                            :value="taxonomyField.getTerms(taxonomyField.selectedTerms)"
                            @input="taxonomyField.setTerms"
                            :append-to-body="false"
                            :disabled="taxonomyField.disableField"
                            :multiple="true"
                            placeholder="<?php echo esc_attr($vehicaSearchField->getPlaceholder()); ?>"
                            :selectable="option => option.count > 0"
                        <?php if ($vehicaSearchField->searchable()) : ?>
                            :searchable="true"
                        <?php else : ?>
                            :searchable="false"
                        <?php endif; ?>
                    >
                        <template #option="option">
                            <div class="vehica-option">
                                <span v-html="option.name"></span>

                                <?php if ($vehicaSearchField->showTermCount()) : ?>
                                    <template v-if="option.count">
                                        <span class="vehica-option__count">({{ option.count }})</span>
                                    </template>
                                <?php endif; ?>
                            </div>
                        </template>

                        <template #selected-option="option">
                            <span class="vehica-option-selected" v-html="option.name"></span>
                        </template>

                        <template #selected-option-container="{ option, deselect, multiple, disabled }">
                            <div class="vs__selected">
                                <span class="vehica-option-selected"><span v-html="option.name"></span></span>
                            </div>
                        </template>
                    </v-select>
                </template>
            <?php endif; ?>
        </div>
    </vehica-taxonomy-search-field>
</div>
