<template>
  <div style="position: relative;">
    <div class="limit-range profile-card right-margin-small" style="overflow-y: scroll;max-height: 785px; padding: 2px; padding-bottom: 30px;"  :class="openSuccessBox === true ? 'animate' : ''">

      <div
        class="button-banner-module text-dark-opacity  button-styled shadow-small btn-primary bottom-margin-medium padding-large cursor-pointer rel"
        style="display: flex; justify-items: stretch;justify-content: space-between;"
        @click.prevent="insertNewBannerWithSubModules(false)">
        <div class="text-center text-ellipsis full-width">
          <p class="text-small text-bold text-center text-ellipsis"
             v-text="getLanguage('button_add_banner')"><br /></p>
        </div>
        <div>
          <i class="fa-sharp fa-solid fa-plus"></i>
        </div>
      </div>

      <div
        v-for="(banner, index) in getStoreBanners"
        style="position: relative"
        :class="`text-dark-opacity relative top-margin-small button-styled flex between-xs down shadow-small limit-range ${activeClass === banner.banner_id ?' border-selected' :'' }   ${banner.status === '0'? 'dislbled-tag' : '' }`"
        @click.prevent="bannerSelectedById(banner.banner_id)">

        <div v-show="(!banner.isEdit)" style="position: absolute;bottom: 5px;left: 67px;" class="absolute ">
          <span class="text-x-small text-sub-title" v-text="`${banner.status === '0'? 'Desabilitado' : 'Habilitado' }`"></span>
        </div>

        <div style="padding: 8px; margin-left: 10px;">
          <i
            @click.stop="banner.isEdit !== true? banner.isEdit = true: banner.isEdit = false; focusInput(index); bannerSelectedById(banner.banner_id); addCookies(banner.isEdit)"
            style="margin-top: 14px; z-index: 2"
            :class="(!banner.isEdit)? 'scale-small cursor-pointer fas fa-edit': 'scale-small cursor-pointer fas fa-check' "></i>
        </div>
        <div class="cursor-pointer padding-small" style="width: 87%;">
          <validation-provider
            tag="div"
            rules="required"
            :name="'BannerName['+index+']'"
            v-slot="{ errors, valid }">
            <base-input
              class="text-small cursor-pointer text-banner-disabled "
              style="cursor: pointer; opacity: 1;"
              @keydown="(e) => keyPress(e, banner)"
              :ref="index"
              :error="errors[0]"
              type="no-field"
              v-model="banner.name"
              maxlength="30"
              mask="alphanumeric"
              :autocomplete="false"
              :disabled="!banner.isEdit"
              :name="'BannerName['+index+']'"
              :placeholder="getLanguage('button_nameNewBanner')"
              @callbackIcon="onOpen(banner.banner_id)"
              icon="fas fa-trash">
            </base-input>
          </validation-provider>

          <base-card
            class="padding-small vertical-no-margin"
            style="margin-left: 133px;
                   position: relative;
                   margin-top: 3px;
                   z-index: 2"
            v-if="banner.isEdit">
            <base-vue-toggles
              :description="banner.status === '1'? 'Habilitado' : 'Desabilitado'"
              :position="1"
              :width="50"
              :height="20"
              :slider-top="false"
              name="status"
              v-model="banner.status">
            </base-vue-toggles>
          </base-card>

        </div>
      </div>
      <base-modal
        v-show="showModal"
        size="medium"
        title="Deseja realmente excluir o banner?"
        :overlay="true"
        @close="onClose()">
        <div class="horizontal-padding-medium vertical-padding-medium text-center">
          <span v-text="getLanguage('text_removeBanners')">
          </span>
        </div>
        <div class="flex justify-center">
          <base-button
            @click.native="removeBannerWithIndex(excludedUUID);onClose()"
            apperance="confirm"
            size="medium">
            <span>Confirmar</span>
          </base-button>
          <base-button
            @click.native="onClose()"
            apperance="cancel"
            class="left-margin-medium"
            size="medium" >
            <span>Cancelar</span>
          </base-button>
        </div>

      </base-modal>
    </div>
    <div v-if="openSuccessBox === true">
      <div class="new-banner-message">
        <div class="success-create">
          <i class="fa fa-check-circle fa-2x" aria-hidden="true"></i>
        </div>
        <div class="success-message">
          <p id="message-text" v-text="getLanguage('text_newBannerSuccess')">
            <br />
            <span class="sub-text" v-text="getLanguage('text_newBannerInfo')">
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="./styles.css"></style>
<script src="./scripts.js"></script>
