@golstats/gsc-lineups-reports 1.0.1

package/src/components/gsc-lineup-dosd.vue

@@ -0,0 +1,3752 @@
+<template>
+  <section class="lineup" :class="{ 'break-point-3': mobileClass }">
+    <div class="lineup__header" ref="gamesContainer">
+      <h2>Alineaciones</h2>
+      <div style="width: 325px" v-if="selectedOption !== 'Postmatch'">
+        <GscSwitchComponent
+          v-if="
+            (gameInfoheader.game_status == 0 || gameInfoheader.game_status == 4) &&
+            gameRecientesFilter.length > 0
+          "
+          :buttons="['Historicos', 'Recientes', 'Probables']"
+          :selectedOption="selectedOption"
+          :type="1"
+          :arrow="false"
+          borderRadius="32px"
+          height="28px"
+          fontSize="11px;"
+          fontFamily="Poppins-Regular"
+          border-width="1px"
+          border-width-container="0.5px"
+          backgroundOptionDisable="#162533"
+          @input="selectedOption = $event"
+        />
+      </div>
+    </div>
+    <div class="lineup__card">
+      <template v-if="selectedOption !== 'Postmatch'">
+        <h3 v-if="selectedOption === 'Probables'">Alineación utilizada este torneo en:</h3>
+        <h3 v-else-if="selectedOption === 'Recientes'">Alineaciones recientes de:</h3>
+        <h3 v-else>Alineación utilizada en:</h3>
+      </template>
+      <template v-if="selectedOption === 'Historicos'">
+        <LineupMainHeader
+          v-if="Object.keys(headerInfoHistoricItemGame).length > 0"
+          :localTeam="{
+            acronym: headerInfoHistoricItemGame.home_team_abbreviation,
+            img:
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              headerInfoHistoricItemGame.home_team +
+              '.png'
+          }"
+          :visitTeam="{
+            acronym: headerInfoHistoricItemGame.away_team_abbreviation,
+            img:
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              headerInfoHistoricItemGame.away_team +
+              '.png'
+          }"
+          :probablyTeamHome="{ acronym: rivalHomeAbrev, img: rivalHomeImg }"
+          :probablyTeamAway="{ acronym: rivalVisitAbrev, img: rivalVisitImg }"
+          :score="headerInfoHistoricItemGame.score[0] + ' - ' + headerInfoHistoricItemGame.score[1]"
+          @change="changeSwitchRadio"
+          :type="selectedOption"
+        />
+      </template>
+      <template v-else>
+        <LineupMainHeader
+          v-if="Object.keys(gameInfoheader).length > 0"
+          :localTeam="{
+            acronym: gameInfoheader.home_team_abbreviation,
+            img: 'https://golstatsimages.blob.core.windows.net/teams-80/' + gameInfoheader.home_team + '.png'
+          }"
+          :visitTeam="{
+            acronym: gameInfoheader.away_team_abbreviation,
+            img: 'https://golstatsimages.blob.core.windows.net/teams-80/' + gameInfoheader.away_team + '.png'
+          }"
+          :probablyTeamHome="{ acronym: rivalHomeAbrev, img: rivalHomeImg }"
+          :probablyTeamAway="{ acronym: rivalVisitAbrev, img: rivalVisitImg }"
+          :score="gameInfoheader.score[0] + ' - ' + gameInfoheader.score[1]"
+          @change="changeSwitchRadio"
+          :type="selectedOption"
+        />
+      </template>
+
+      <div v-if="selectedOption === 'Historicos'" class="lineup__card-body">
+        <template v-if="selectedOption !== 'Postmatch'">
+          <div class="lineup__selector" style="margin: auto">
+            <GSCCarousel
+              :key="updatehistoricos"
+              v-if="gamesHistoric.length > 0"
+              @input="changeCarouselItemH"
+              :items="gamesHistoric"
+              isMainSlidePriority
+              areSlidesArrowsVisible
+              :areNavigationArrowsVisible="false"
+              slideLeftArrowBackgroundImage="none"
+              slideRightArrowBackgroundImage="none"
+            >
+              <template #default="{ item }">
+                <div class="lineup__selector-item">
+                  {{ item.description }}
+                </div>
+              </template>
+            </GSCCarousel>
+          </div>
+          <div class="lineup__text-btn-abs" @click="showDetails = !showDetails">
+            {{ !showDetails ? 'Ver detalles' : 'Ocultar detalles' }}
+          </div>
+        </template>
+      </div>
+      <div
+        v-else-if="selectedOption === 'Recientes'"
+        class="lineup__card-body"
+        style="flex-flow: column"
+      >
+        <div class="lineup__filters">
+          <LineupFilter name="Filtros" @change="changeFiltersModal" :reset="vDeleteFilter" />
+          <div class="lineup__filters__selector" ref="targetElement" @click="handleInsideClick">
+            <GSCDropdown
+              @click="clickOnValueFilter"
+              :items="matchdaysFinal"
+              @input="changeDropdown"
+              backgroundColor="transparent"
+              height="25px"
+              :key="keyUpdate"
+              color="rgba(255, 255, 255, 0.7)"
+              arrowColor="rgba(255, 255, 255, 0.7)"
+              borderColor="rgba(255, 255, 255, 0.3)"
+              style="font-size: 10px"
+              arrowHeight="16"
+              :arrowWidth="16"
+              :default-item-by-prop="defaultDropItem"
+              listHeight="300px"
+              listBackgroundColor="#243a4c"
+              hoverBackgroundColor="#0d1d2a"
+              listItemColor="#FFFFFF"
+              listItemSelectedBackgroundColor="#0d1d2a"
+              listItemSelectedColor="#c3e569"
+              listItemPadding="8px 7px"
+              listBorderColor="rgba(255, 255, 255, 0.1)"
+              listBorderRadius="2px"
+            >
+              <template #default="data">
+                <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
+              </template>
+              <template #availableItem="{ item }">
+                <div>{{ item.name }}</div>
+              </template>
+            </GSCDropdown>
+          </div>
+          <div class="lineup__text-btn" @click="showDetails = !showDetails">
+            {{ !showDetails ? 'Ver detalles' : 'Ocultar detalles' }}
+          </div>
+        </div>
+        <div class="lineup__items-carousel">
+          <div></div>
+          <div class="lineup__items-center">
+            <template v-if="!mobileClass">
+              <div class="lineup__selector-recientes">
+                <GSCCarousel
+                  @click="clickOnValueCarrousel"
+                  :default-item-by-index="selectedIndexOption"
+                  v-if="gameRecientesFilter.length > 0"
+                  width="600px"
+                  height="80px"
+                  :key="updateCarouselGames"
+                  @input="changeCarouselItem"
+                  :items="gameRecientesFilter"
+                  isMainSlidePriority
+                  areSlidesArrowsVisible
+                  :areNavigationArrowsVisible="false"
+                  slideLeftArrowBackgroundImage="none"
+                  slideRightArrowBackgroundImage="none"
+                >
+                  <template #default="{ item }">
+                    <LineupRecentItem :game="item" :teamSelect="teamSelect" />
+                  </template>
+                </GSCCarousel>
+                <div v-else class="containernofoundsearchrecientes">
+                  <div class="text-containernofoundsearchrecientes">
+                    No hay resultados con los criterios, <br />
+                    de búsqueda aplicados.
+                  </div>
+                  <div class="btn-delete-filters" @click="clickOnDeleteFilter">
+                    Eliminar filtros aplicados
+                  </div>
+                </div>
+              </div>
+              <MatchDetails
+                v-if="showDetails"
+                :localDetails="localDetails"
+                :foreignDetails="foreignDetails"
+              />
+            </template>
+            <!-- <FilterEmpty />-->
+          </div>
+        </div>
+        <div
+          v-if="mobileClass"
+          class="lineup__selector-recientes"
+          style="margin: auto; width: 100%"
+        >
+          <GSCCarousel
+            @click="clickOnValueCarrousel"
+            :default-item-by-index="selectedIndexOption"
+            v-if="gameRecientesFilter.length > 0"
+            width="600px"
+            height="80px"
+            :key="updateCarouselGames"
+            @input="changeCarouselItem"
+            :items="gameRecientesFilter"
+            isMainSlidePriority
+            areSlidesArrowsVisible
+            :areNavigationArrowsVisible="false"
+          >
+            <template #default="{ item }">
+              <LineupRecentItem :game="item" :teamSelect="teamSelect" style="max-width: 200px" />
+            </template>
+          </GSCCarousel>
+          <MatchDetails
+            v-if="showDetails"
+            :localDetails="localDetails"
+            :foreignDetails="foreignDetails"
+          />
+        </div>
+      </div>
+      <div v-else-if="selectedOption === 'Probables'" class="lineup__card-body space-between">
+        <div class="lineup__card-body__probables">
+          <GSCDropdown
+            :items="matchHomeProbables"
+            @input="changeDropdownLocal"
+            backgroundColor="transparent"
+            height="25px"
+            color="rgba(255, 255, 255, 0.7)"
+            arrowColor="rgba(255, 255, 255, 0.7)"
+            borderColor="rgba(255, 255, 255, 0.3)"
+            style="font-size: 10px"
+            arrowHeight="16"
+            :arrowWidth="16"
+            listHeight="300px"
+            listBackgroundColor="#243a4c"
+            hoverBackgroundColor="#0d1d2a"
+            listItemColor="#FFFFFF"
+            listItemSelectedBackgroundColor="#0d1d2a"
+            listItemSelectedColor="#c3e569"
+            listItemPadding="8px 7px"
+            listBorderColor="rgba(255, 255, 255, 0.1)"
+            listBorderRadius="2px"
+          >
+            <template #default="data">
+              <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
+            </template>
+            <template #availableItem="{ item }">
+              <div>{{ item.name }}</div>
+            </template>
+          </GSCDropdown>
+          <div class="lineup__card-body__team-vs">vs</div>
+          <img :src="rivalHomeImg" class="lineup__card-body__img-probables" />
+        </div>
+
+        <div class="lineup__card-body__probables">
+          <img :src="rivalVisitImg" class="lineup__card-body__img-probables" />
+          <div class="lineup__card-body__team-vs">vs</div>
+          <GSCDropdown
+            :items="matchAwayProbables"
+            @input="changeDropdownVisit"
+            backgroundColor="transparent"
+            height="25px"
+            color="rgba(255, 255, 255, 0.7)"
+            arrowColor="rgba(255, 255, 255, 0.7)"
+            borderColor="rgba(255, 255, 255, 0.3)"
+            style="font-size: 10px"
+            arrowHeight="16"
+            :arrowWidth="16"
+            listHeight="300px"
+            listBackgroundColor="#243a4c"
+            hoverBackgroundColor="#0d1d2a"
+            listItemColor="#FFFFFF"
+            listItemSelectedBackgroundColor="#0d1d2a"
+            listItemSelectedColor="#c3e569"
+            listItemPadding="8px 7px"
+            listBorderColor="rgba(255, 255, 255, 0.1)"
+            listBorderRadius="2px"
+          >
+            <template #default="data">
+              <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
+            </template>
+            <template #availableItem="{ item }">
+              <div>{{ item.name }}</div>
+            </template>
+          </GSCDropdown>
+        </div>
+      </div>
+
+      <div v-else-if="selectedOption === 'Postmatch'" class="lineup__card-body space-between">
+        <div class="postmatch__matchday">
+          {{
+            gameInfoheader.season_name !== undefined
+              ? gameInfoheader.season_name +
+                '&nbsp; |  &nbsp;' +
+                remplazarMxJor(gameInfoheader.matchday_abbreviation) +
+                '&nbsp; | &nbsp;' +
+                gameInfoheader.home_team_abbreviation +
+                ' - ' +
+                gameInfoheader.away_team_abbreviation
+              : ''
+          }}
+        </div>
+        <div class="lineup__text-btn-abs" @click="showDetails = !showDetails">
+          {{ !showDetails ? 'Ver detalles' : 'Ocultar detalles' }}
+        </div>
+      </div>
+      <MatchDetails
+        style="margin-bottom: 17px"
+        v-if="showDetails && (selectedOption === 'Historicos' || selectedOption === 'Postmatch')"
+        :localDetails="localDetails"
+        :foreignDetails="foreignDetails"
+      />
+      <LineupField class="lineup__field" :players="players" />
+    </div>
+  </section>
+</template>
+
+<script>
+import axios from 'axios'
+import { connectSocket, connectChannel } from '@/utils/socketConnection'
+let calendarResizeObserver = null
+import tijuanaImage from '@/components/Lineup2D/tijuana.png'
+import LineupField from '@/components/Lineup2D/LineupField.vue'
+import LineupRecentItem from '@/components/Lineup2D/LineupRecentItem.vue'
+import LineupMainHeader from '@/components/Lineup2D/LineupMainHeader.vue'
+import LineupFilter from '@/components/Lineup2D/LineupFilter.vue'
+import MatchDetails from '@/components/Lineup2D/MatchDetails.vue'
+import { GscSwitchComponent } from '@golstats/gsc-switch-component'
+import { GSCCarousel } from '@golstats/gsc-carousel'
+
+/*
+import {
+    GSCDropdown
+} from './gsc-dropdown.js'
+import './style.css'
+*/
+
+import { GSCDropdown } from '@golstats/gsc-dropdown'
+import '@@/@golstats/gsc-dropdown/dist/style.css'
+
+import '@@/@golstats/gsc-switch-radio/dist/style.css'
+import '@@/@golstats/gsc-switch-component/dist/style.css'
+import '@@/@golstats/gsc-carousel/dist/style.css'
+import '@@/@golstats/gsc-button/dist/style.css'
+
+export default {
+  components: {
+    LineupField,
+    LineupRecentItem,
+    LineupMainHeader,
+    LineupFilter,
+    MatchDetails,
+    GscSwitchComponent,
+    GSCCarousel,
+    GSCDropdown
+  },
+  props: {
+    game: {
+      type: Object,
+      default: () => {}
+    },
+    selectedOption: {
+      type: String,
+      default: 'Recientes'
+    },
+    componentWidth: {
+      type: Number,
+      default: 767,
+      validator(value) {
+        return value > 0
+      }
+    },
+    socket: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      selectedIndexOption: 0,
+      rivalHomeImg: '',
+      rivalVisitImg: '',
+      rivalHomeAbrev: '',
+      updatehistoricos: 0,
+      rivalVisitAbrev: '',
+      selectOptMenuheader: 'Recientes',
+      token:
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MCwibmFtZSI6IlVzdWFyaW8gRnJlZSIsInVzZXJuYW1lIjoiZnJlZUBnb2xzdGF0cy5jb20iLCJlbWFpbCI6ImZyZWVAZ29sc3RhdHMuY29tIiwiaWF0IjoxNjA2NzU4Nzk1LCJleHAiOjE2MzgyOTQ3OTV9.kPNmP7yDtk38cAXrUyc7OHRh6J25VFqy-XUNzbK-4YE',
+      tokenPremium:
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NTg2LCJuYW1lIjoiSkFTIEdvbFN0YXRzIiwidXNlcm5hbWUiOiJ5YXRlYW1lcmljYSIsImVtYWlsIjoiIiwicHJvdmlkZXJfaWQiOjEsImxvZ2luX2dvbHN0YXRzIjoxLCJpYXQiOjE2OTYzNjU1ODcsImV4cCI6MTcyNzkwMTU4N30.jynRtgtFM8sf8gtqZJ-1gHLc2Ws13TIykXcfrlOvv1g',
+      urlGames:
+        'https://iwxfzq6e2h.execute-api.us-west-2.amazonaws.com/prod/v2/statisticsLeagueBySeason/',
+      url: 'https://tj4cepyjc4.execute-api.us-west-2.amazonaws.com/prod/lineups/',
+      urlMXM: 'https://al2nv2dmkc.execute-api.us-west-2.amazonaws.com/prod/mxm/',
+      retries: 3,
+      teamActive: 'home',
+      subsActive: false,
+      playersHome: [],
+      gamesContainerWidth: 0,
+      playersAway: [],
+      subsTitle: false,
+      uniformHome: '',
+      uniformHomeG: '',
+      uniformAway: '',
+      uniformAwayG: '',
+      dataPlayersHome: [],
+      dataPlayersAway: [],
+      homeTeamLogo: '',
+      awayTeamLogo: '',
+      homeTeamName: '',
+      auxISsection: 0,
+      awayTeamName: '',
+      homeTeamAbrev: '',
+      awayTeamAbrev: '',
+      home_team_id: 0,
+      updateComponentAway: 0,
+      away_team_id: 0,
+      substitutionModal: {
+        min: '',
+        in: {
+          playerImg: '',
+          teamImg: '',
+          nationalityimg: '',
+          name: '',
+          position: '',
+          shirt_number: ''
+        },
+        out: {
+          playerImg: '',
+          teamImg: '',
+          nationalityimg: '',
+          name: '',
+          position: '',
+          shirt_number: ''
+        }
+      },
+      isInsideClick: false,
+      homeTeam: {},
+      headerInfoHistoricItemGame: {},
+      visitingTeam: {},
+      gameForAnalysis: {},
+      movil: false,
+      auxProbablesIDGameHome: 0,
+      auxProbablesIDGameAway: 0,
+      positions: [
+        {
+          name: 'Portero'
+        },
+        {
+          name: 'Defensa central'
+        },
+        {
+          name: 'Lateral por izquierda'
+        },
+        {
+          name: 'Lateral por derecha'
+        },
+        {
+          name: 'Volante por izquierda'
+        },
+        {
+          name: 'Volante por derecha'
+        },
+        {
+          name: 'Volante defensivo'
+        },
+        {
+          name: 'Volante ofensivo'
+        },
+        {
+          name: 'Delantero'
+        },
+        {
+          name: 'Desconocida'
+        }
+      ],
+      vDeleteFilter: false,
+      gameInfoheader: {},
+      gamesHistoric: [],
+      gamesRecientes: [],
+      matchdaysPerTeam: [],
+      lastGetGame: 0,
+
+      probablyTeam: {
+        acronym: 'NEX',
+        img: tijuanaImage
+      },
+      localDetails: [],
+      postmatchDescription: 'Clausura 2018  I  JOR 5  I  CHI - ATL 12',
+      showDetails: false,
+      foreignDetails: [],
+      players: [],
+      filterObject: {
+        selectedFilterResults: ['win', 'draw', 'lose'],
+        selectedFilterTeam: ['visit', 'local']
+      },
+      updateCarouselGames: 0,
+      teamSelect: '',
+      matchdaysFiltersUpdate: [],
+      gamesFiltersUpdate: []
+    }
+  },
+  computed: {
+    matchdaysFinal() {
+      var matchdaysFinal = []
+      if (typeof this.filterObject.selectedFilterResults !== 'undefined') {
+        if (Object.keys(this.filterObject.selectedFilterResults).length != 3) {
+          if (Object.keys(this.filterObject.selectedFilterResults).length == 2) {
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('draw')
+            ) {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('lose')
+            ) {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('lose') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('draw')
+            ) {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+          } else {
+            if (this.filterObject.selectedFilterResults[0] == 'win') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+            if (this.filterObject.selectedFilterResults[0] == 'lose') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+            if (this.filterObject.selectedFilterResults[0] == 'draw') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+          }
+        } else {
+          for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+            matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+          }
+        }
+      } else {
+        for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+          matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+        }
+      }
+      matchdaysFinal.sort((a, b) => b.id - a.id)
+      return matchdaysFinal
+    },
+    gameRecientesFilter() {
+      var gameFilterFinal = []
+      if (typeof this.filterObject.selectedFilterResults !== 'undefined') {
+        if (Object.keys(this.filterObject.selectedFilterResults).length != 3) {
+          if (Object.keys(this.filterObject.selectedFilterResults).length == 2) {
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('draw')
+            ) {
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 1)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 3)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('lose')
+            ) {
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 1)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 2)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('lose') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('draw')
+            ) {
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 3)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 2)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+          } else {
+            if (this.filterObject.selectedFilterResults[0] == 'win') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 1)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+            if (this.filterObject.selectedFilterResults[0] == 'lose') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 2)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+            if (this.filterObject.selectedFilterResults[0] == 'draw') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 3)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+          }
+        } else {
+          for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+            gameFilterFinal.push(this.gamesFiltersUpdate[index])
+          }
+        }
+      } else {
+        for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+          gameFilterFinal.push(this.gamesFiltersUpdate[index])
+        }
+      }
+      gameFilterFinal.sort((a, b) => a.matchday_id - b.matchday_id)
+      return gameFilterFinal
+    },
+    matchHomeProbables() {
+      return this.matchdaysPerTeam[this.gameInfoheader.home_team_abbreviation]
+    },
+    matchAwayProbables() {
+      return this.matchdaysPerTeam[this.gameInfoheader.home_team_abbreviation]
+    },
+    sizeBrowser() {
+      return this.gamesContainerWidth
+    },
+    numPlayer() {
+      return Number(this.playersAway.length) + Number(this.playersHome.length)
+    },
+    benchFillHome() {
+      if (this.playersHome.length < this.playersAway.length) {
+        return this.playersAway.length - this.playersHome.length
+      } else {
+        return 0
+      }
+    },
+    benchFillAway() {
+      if (this.playersAway.length < this.playersHome.length) {
+        return this.playersHome.length - this.playersAway.length
+      } else {
+        return 0
+      }
+    },
+    mobileClass() {
+      return this.calendarResizeObserver < 768 ? 'break-point-3' : ''
+    }
+  },
+  async mounted() {
+    document.addEventListener('click', this.handleOutsideClick)
+    setTimeout(() => {
+      this.setUpResizeObserver()
+    }, 500)
+    if (this.game || this.$route.params.gameId) {
+      try {
+        this.cleaneData()
+        this.getLineUp(this.game.game_id)
+        await this.getHeaderInfo(this.game)
+        this.teamSelect = this.gameInfoheader.home_team_abbreviation
+        await this.matchFilter()
+        if (this.selectedOption === 'Postmatch') {
+          setTimeout(() => {
+            this.getMinutesData(this.gameInfoheader.minutes)
+          }, 600)
+        }
+      } catch (e) {
+        throw new Error(e)
+      }
+    }
+  },
+  beforeDestroy() {
+    // Remove the click event listener when the component is destroyed
+    document.removeEventListener('click', this.handleOutsideClick)
+  },
+  watch: {
+    selectedOption: {
+      immediate: false,
+      async handler(newValue) {
+        this.cleaneData()
+        this.auxProbablesIDGameHome = 0
+        this.auxProbablesIDGameAway = 0
+        if (newValue === 'Postmatch') {
+          await this.getLineUp(this.game.game_id)
+        }
+        if (newValue === 'Probables') {
+          await this.getHeaderInfo(this.game)
+        }
+        if (newValue === 'Recientes') {
+          this.auxISsection = 1
+          this.teamSelect = this.gameInfoheader.home_team_abbreviation
+          await this.matchFilter()
+          await this.getLineUp(this.gameRecientesFilter[0].id)
+        }
+        if (newValue === 'Historicos') {
+          this.updatehistoricos += 1
+          if (
+            this.gamesHistoric &&
+            this.gamesHistoric.length > 0 &&
+            this.gamesHistoric[0] &&
+            this.gamesHistoric[0].game
+          ) {
+            this.getLineUp(this.gamesHistoric[0].game)
+            this.getMinutesData(this.gamesHistoric[0].objgame.minutes)
+          }
+        }
+      }
+    },
+    'socket.connected': {
+      immediate: true,
+      handler(newValue) {
+        if (newValue) {
+          this.getDataSocket()
+        }
+      }
+    },
+    game: {
+      immediate: true,
+      handler: async function (newValue) {
+        try {
+          if (newValue !== null && newValue !== '' && typeof newValue === 'undefined') {
+            this.cleaneData()
+            await this.gameDataInfo(newValue)
+            await this.getHeaderInfo(newValue)
+
+            if (this.selectedOption == 'Recientes') {
+              this.teamSelect = this.gameInfoheader.home_team_abbreviation
+
+              await this.matchFilter()
+              await this.getLineUp(this.gameRecientesFilter[0].id)
+            }
+            if (this.selectedOption == 'Historicos') {
+              this.updatehistoricos += 1
+              if (
+                this.gamesHistoric &&
+                this.gamesHistoric.length > 0 &&
+                this.gamesHistoric[0] &&
+                this.gamesHistoric[0].game
+              ) {
+                this.getLineUp(this.gamesHistoric[0].game)
+                this.getMinutesData(this.gamesHistoric[0].objgame.minutes)
+              }
+            }
+          }
+        } catch (e) {
+          throw new Error(e)
+        }
+      }
+    }
+  },
+  methods: {
+    clickOnDeleteFilter() {
+      this.vDeleteFilter = true
+      setTimeout(() => {
+        this.vDeleteFilter = false
+      }, 200)
+    },
+    clickready() {},
+    handleInsideClick() {
+      this.isInsideClick = true
+    },
+    handleOutsideClick(event) {
+      if (this.$refs.targetElement && !this.$refs.targetElement.contains(event.target)) {
+        // Click occurred outside the target element
+        this.isInsideClick = false
+      }
+    },
+    remplazarMxJor(val) {
+      return val.replace('M', 'JOR ')
+    },
+    changeSwitchRadio(val) {
+      this.auxISsection = 1
+      if (typeof val !== 'object') {
+        this.teamSelect = val
+
+        this.matchFilter()
+        setTimeout(() => {
+          this.keyUpdate += 1
+          this.updateCarouselGames += 1
+        }, 600)
+      }
+    },
+    matchFilter() {
+      var matchdayFilter = []
+      var gameFilter = []
+      if (Object.keys(this.filterObject).length > 0) {
+        if (Object.keys(this.filterObject.selectedFilterTeam).length != 2) {
+          for (let index = 0; index < this.gamesRecientes[this.teamSelect].length; index++) {
+            if (this.filterObject.selectedFilterTeam[0] == 'local') {
+              if (
+                this.gamesRecientes[this.teamSelect][index].home_team_abbreviation ==
+                this.teamSelect
+              ) {
+                matchdayFilter.push({
+                  name: this.gamesRecientes[this.teamSelect][index].matchday_abbreviation.replace(
+                    'M',
+                    'Jornada '
+                  ),
+                  id: this.gamesRecientes[this.teamSelect][index].matchday_id,
+                  match_result: this.gamesRecientes[this.teamSelect][index].home_match_result
+                })
+                gameFilter.push(this.gamesRecientes[this.teamSelect][index])
+              }
+            } else {
+              if (
+                this.gamesRecientes[this.teamSelect][index].away_team_abbreviation ==
+                this.teamSelect
+              ) {
+                matchdayFilter.push({
+                  name: this.gamesRecientes[this.teamSelect][index].matchday_abbreviation.replace(
+                    'M',
+                    'Jornada '
+                  ),
+                  id: this.gamesRecientes[this.teamSelect][index].matchday_id,
+                  match_result: this.gamesRecientes[this.teamSelect][index].visiting_match_result
+                })
+                gameFilter.push(this.gamesRecientes[this.teamSelect][index])
+              }
+            }
+          }
+        } else {
+          if (this.gamesRecientes[this.teamSelect]) {
+            for (let index = 0; index < this.gamesRecientes[this.teamSelect].length; index++) {
+              matchdayFilter.push({
+                name: this.gamesRecientes[this.teamSelect][index].matchday_abbreviation.replace(
+                  'M',
+                  'Jornada '
+                ),
+                id: this.gamesRecientes[this.teamSelect][index].matchday_id,
+                match_result:
+                  this.gamesRecientes[this.teamSelect][index].home_team_abbreviation ==
+                  this.teamSelect
+                    ? this.gamesRecientes[this.teamSelect][index].home_match_result
+                    : this.gamesRecientes[this.teamSelect][index].visiting_match_result
+              })
+              gameFilter.push(this.gamesRecientes[this.teamSelect][index])
+            }
+          }
+        }
+      } else {
+        if (this.gamesRecientes[this.teamSelect]) {
+          for (let index = 0; index < this.gamesRecientes[this.teamSelect].length; index++) {
+            matchdayFilter.push({
+              name: this.getRound(
+                this.gamesRecientes[this.teamSelect][index].matchday_abbreviation
+              ),
+              id: this.gamesRecientes[this.teamSelect][index].matchday_id,
+              match_result:
+                this.gamesRecientes[this.teamSelect][index].home_team_abbreviation ==
+                this.teamSelect
+                  ? this.gamesRecientes[this.teamSelect][index].home_match_result
+                  : this.gamesRecientes[this.teamSelect][index].visiting_match_result
+            })
+            gameFilter.push(this.gamesRecientes[this.teamSelect][index])
+          }
+        }
+      }
+      this.gamesFiltersUpdate = gameFilter
+      this.matchdaysFiltersUpdate = matchdayFilter
+    },
+    changeFiltersModal(filters) {
+      this.auxISsection = 1
+      this.filterObject = filters
+      this.matchFilter()
+      setTimeout(() => {
+        this.keyUpdate += 1
+        this.updateCarouselGames += 1
+      }, 600)
+    },
+
+    changeDropdownVisit(val) {
+      if (this.auxProbablesIDGameAway != val.id) {
+        this.auxProbablesIDGameAway = val.id
+        const indexGame = this.gamesRecientes[this.gameInfoheader.away_team_abbreviation].findIndex(
+          (x) => x.matchday_id === val.id
+        )
+        this.rivalVisitAbrev =
+          this.gameInfoheader.away_team_abbreviation ==
+          this.gamesRecientes[this.gameInfoheader.away_team_abbreviation][indexGame]
+            .home_team_abbreviation
+            ? this.gamesRecientes[this.gameInfoheader.away_team_abbreviation][indexGame]
+                .away_team_abbreviation
+            : this.gamesRecientes[this.gameInfoheader.away_team_abbreviation][indexGame]
+                .home_team_abbreviation
+        this.rivalVisitImg =
+          this.gameInfoheader.away_team_abbreviation ==
+          this.gamesRecientes[this.gameInfoheader.away_team_abbreviation][indexGame]
+            .home_team_abbreviation
+            ? 'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              this.gamesRecientes[this.gameInfoheader.away_team_abbreviation][indexGame].away_team +
+              '.png'
+            : 'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              this.gamesRecientes[this.gameInfoheader.away_team_abbreviation][indexGame].home_team +
+              '.png'
+        this.cleaneDataProbablesAway()
+        this.getLineupDataProbablesAway(
+          this.gamesRecientes[this.gameInfoheader.away_team_abbreviation][indexGame].id
+        )
+      }
+    },
+    changeDropdownLocal(val) {
+      if (this.auxProbablesIDGameHome != val.id) {
+        this.auxProbablesIDGameHome = val.id
+        const indexGame = this.gamesRecientes[this.gameInfoheader.home_team_abbreviation].findIndex(
+          (x) => x.matchday_id === val.id
+        )
+        this.rivalHomeAbrev =
+          this.gameInfoheader.home_team_abbreviation ==
+          this.gamesRecientes[this.gameInfoheader.home_team_abbreviation][indexGame]
+            .away_team_abbreviation
+            ? this.gamesRecientes[this.gameInfoheader.home_team_abbreviation][indexGame]
+                .home_team_abbreviation
+            : this.gamesRecientes[this.gameInfoheader.home_team_abbreviation][indexGame]
+                .away_team_abbreviation
+        this.rivalHomeImg =
+          this.gameInfoheader.home_team_abbreviation ==
+          this.gamesRecientes[this.gameInfoheader.home_team_abbreviation][indexGame]
+            .away_team_abbreviation
+            ? 'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              this.gamesRecientes[this.gameInfoheader.home_team_abbreviation][indexGame].home_team +
+              '.png'
+            : 'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              this.gamesRecientes[this.gameInfoheader.home_team_abbreviation][indexGame].away_team +
+              '.png'
+        this.cleaneDataProbablesHome()
+        this.getLineupDataProbablesHome(
+          this.gamesRecientes[this.gameInfoheader.home_team_abbreviation][indexGame].id
+        )
+      }
+    },
+    async getLineupProbables(val) {
+      var newValue = { season_id: val.season_id, game_id: val.id }
+      if (this.lastGetGame != newValue.game_id) {
+        this.cleaneData()
+
+        this.getLineUp(newValue.game_id)
+      }
+      this.lastGetGame = newValue.game_id
+    },
+
+    async changeCarouselItemH(val) {
+      this.headerInfoHistoricItemGame = val.selectedItem.objgame
+      var newValue = { season_id: val.selectedItem.season, game_id: val.selectedItem.game }
+      this.cleaneData()
+      this.getMinutesData(val.selectedItem.objgame.minutes)
+      this.getLineUp(newValue.game_id)
+    },
+
+    getMinutesData(plays) {
+      this.localDetails = []
+      this.foreignDetails = []
+      if (plays) {
+        if (plays.home_goals_minutes) {
+          for (let index = 0; index < plays.home_goals_minutes.length; index++) {
+            this.localDetails.push({ description: plays.home_goals_minutes[index], icon: 'goal' })
+          }
+        }
+        if (plays.visiting_goals_minutes) {
+          for (let index = 0; index < plays.visiting_goals_minutes.length; index++) {
+            this.foreignDetails.push({
+              description: plays.visiting_goals_minutes[index],
+              icon: 'goal'
+            })
+          }
+        }
+        if (plays.home_yellow_cards_minutes) {
+          for (let index = 0; index < plays.home_yellow_cards_minutes.length; index++) {
+            this.localDetails.push({
+              description: plays.home_yellow_cards_minutes[index],
+              icon: 'yellow-card'
+            })
+          }
+        }
+        if (plays.away_yellow_cards_minutes) {
+          for (let index = 0; index < plays.away_yellow_cards_minutes.length; index++) {
+            this.foreignDetails.push({
+              description: plays.away_yellow_cards_minutes[index],
+              icon: 'yellow-card'
+            })
+          }
+        }
+        if (plays.home_red_cards_minutes) {
+          for (let index = 0; index < plays.home_red_cards_minutes.length; index++) {
+            this.localDetails.push({
+              description: plays.home_red_cards_minutes[index],
+              icon: 'red-card'
+            })
+          }
+        }
+        if (plays.away_red_cards_minutes) {
+          for (let index = 0; index < plays.away_red_cards_minutes.length; index++) {
+            this.foreignDetails.push({
+              description: plays.away_red_cards_minutes[index],
+              icon: 'red-card'
+            })
+          }
+        }
+      }
+    },
+    changeDropdown(value) {
+      if (this.gameRecientesFilter && this.gameRecientesFilter.length > 0) {
+        if (this.auxISsection == 1) {
+          this.selectedIndexOption = this.gameRecientesFilter.length - 1
+          this.defaultDropItem = {
+            propName: 'id',
+            value: this.gameRecientesFilter[this.gameRecientesFilter.length - 1].matchday_id
+          }
+        } else {
+          const index = this.gameRecientesFilter.findIndex((x) => x.matchday_id == value.id)
+          if (index != -1) {
+            this.selectedIndexOption = index
+          }
+          this.defaultDropItem = {
+            propName: 'id',
+            value: this.gameRecientesFilter[index].matchday_id
+          }
+        }
+      }
+    },
+    clickOnValueFilter() {
+      this.auxISsection = 0
+    },
+    clickOnValueCarrousel() {
+      this.auxISsection = 0
+    },
+    async changeCarouselItem(val) {
+      setTimeout(() => {
+        if (this.gameRecientesFilter && this.gameRecientesFilter.length > 0) {
+          if (val) {
+            if (val.selectedItem === undefined) {
+              val.selectedItem = this.gameRecientesFilter[this.gameRecientesFilter.length - 1]
+              val.selectedItemIndex = this.gameRecientesFilter.length - 1
+            }
+            var newValue = {}
+            if (this.auxISsection == 1) {
+              newValue = {
+                season_id: this.gameRecientesFilter[this.gameRecientesFilter.length - 1].season_id,
+                game_id: this.gameRecientesFilter[this.gameRecientesFilter.length - 1].id
+              }
+            } else {
+              newValue = { season_id: val.selectedItem.season_id, game_id: val.selectedItem.id }
+            }
+            if (this.lastGetGame != newValue.game_id) {
+              this.cleaneData()
+              this.getLineUp(newValue.game_id)
+            }
+            if (this.auxISsection == 1) {
+              this.getMinutesData(
+                this.gameRecientesFilter[this.gameRecientesFilter.length - 1].minutes
+              )
+              this.selectedIndexOption = this.gameRecientesFilter.length - 1
+              this.defaultDropItem = {
+                propName: 'id',
+                value:
+                  this.gameRecientesFilter[this.gameRecientesFilter.length - 1].minutes.matchday_id
+              }
+
+              this.lastGetGame = newValue.game_id
+            } else {
+              this.getMinutesData(val.selectedItem.minutes)
+              this.defaultDropItem = { propName: 'id', value: val.selectedItem.matchday_id }
+
+              this.lastGetGame = newValue.game_id
+              this.selectedIndexOption = val.selectedItemIndex
+            }
+
+            this.keyUpdate += 1
+          }
+        }
+      }, 200)
+    },
+    async changeCarouselItemRecent(val) {
+      if (val.selectedItem) {
+        var newValue = { season_id: val.selectedItem.season_id, game_id: val.selectedItem.id }
+        if (this.lastGetGame != newValue.game_id) {
+          this.cleaneData()
+          this.getLineUp(newValue.game_id)
+        }
+        this.lastGetGame = newValue.game_id
+      }
+    },
+    getRound(abrev) {
+      let abrevFormatted = abrev.replace('M', 'Jornada ')
+      abrevFormatted = abrevFormatted.replace('PO1', 'CFI')
+      abrevFormatted = abrevFormatted.replace('PO2', 'CFV')
+      abrevFormatted = abrevFormatted.replace('PO3', 'SFI')
+      abrevFormatted = abrevFormatted.replace('PO4', 'SFV')
+      abrevFormatted = abrevFormatted.replace('PO5', 'FI')
+      abrevFormatted = abrevFormatted.replace('PO6', 'FV')
+      return abrevFormatted
+    },
+    getRoundH(abrev) {
+      let abrevFormatted = abrev.replace('M', 'J')
+      abrevFormatted = abrevFormatted.replace('PO1', 'CFI')
+      abrevFormatted = abrevFormatted.replace('PO2', 'CFV')
+      abrevFormatted = abrevFormatted.replace('PO3', 'SFI')
+      abrevFormatted = abrevFormatted.replace('PO4', 'SFV')
+      abrevFormatted = abrevFormatted.replace('PO5', 'FI')
+      abrevFormatted = abrevFormatted.replace('PO6', 'FV')
+      return abrevFormatted
+    },
+    async getHeaderInfo(game) {
+      const axiosInstance = axios.create({
+        headers: {
+          Authorization: `${this.tokenPremium}`
+        }
+      })
+      const data = await axiosInstance.get(
+        'https://fxtcaw9tw6.execute-api.us-east-2.amazonaws.com/prod/historic/seasons/' +
+          game.season_id +
+          '/games/' +
+          game.game_id +
+          '/lineups'
+      )
+      this.gameInfoheader = data.data.game
+      if (data.data.games_historic && data.data.games_historic.length > 0) {
+        for (let index = 0; index < data.data.games_historic.length; index++) {
+          this.gamesHistoric.push({
+            objgame: data.data.games_historic[index],
+            game: data.data.games_historic[index].id,
+            season: data.data.games_historic[index].season_id,
+            description:
+              data.data.games_historic[index].season_name +
+              '  |  ' +
+              this.getRoundH(data.data.games_historic[index].matchday_abbreviation) +
+              ' | ' +
+              data.data.games_historic[index].home_team_abbreviation +
+              ' - ' +
+              data.data.games_historic[index].away_team_abbreviation
+          })
+        }
+      }
+      this.gamesRecientes[data.data.game.home_team_abbreviation] = []
+      this.gamesRecientes[data.data.game.away_team_abbreviation] = []
+      this.matchdaysPerTeam[data.data.game.home_team_abbreviation] = []
+      this.matchdaysPerTeam[data.data.game.away_team_abbreviation] = []
+      if (data.data.home_team_games_recent && data.data.home_team_games_recent.length > 0) {
+        for (let index = 0; index < data.data.home_team_games_recent.length; index++) {
+          this.gamesRecientes[data.data.game.home_team_abbreviation].push(
+            data.data.home_team_games_recent[index]
+          )
+          this.matchdaysPerTeam[data.data.game.home_team_abbreviation].push({
+            name: this.getRound(data.data.home_team_games_recent[index].matchday_abbreviation),
+            id: data.data.home_team_games_recent[index].matchday_id
+          })
+        }
+      }
+
+      if (data.data.away_team_games_recent && data.data.away_team_games_recent.length > 0) {
+        for (let index = 0; index < data.data.away_team_games_recent.length; index++) {
+          this.gamesRecientes[data.data.game.away_team_abbreviation].push(
+            data.data.away_team_games_recent[index]
+          )
+          this.matchdaysPerTeam[data.data.game.away_team_abbreviation].push({
+            name: data.data.away_team_games_recent[index].matchday_abbreviation.replace(
+              'M',
+              'Jornada '
+            ),
+            id: data.data.away_team_games_recent[index].matchday_id
+          })
+        }
+      }
+    },
+    clickOnSelectOption(val) {
+      this.selectOptMenuheader = val
+    },
+    async gameDataInfo(game) {
+      const axiosInstance = axios.create({
+        headers: {
+          Authorization: `${this.tokenPremium}`
+        }
+      })
+      const data = await axiosInstance.get(
+        this.urlGames + game.season_id + '/games/' + game.game_id
+      )
+      this.homeTeam = data.data.teams[0]
+      this.visitingTeam = data.data.teams[1]
+      const gameinfo = data.data.games.find((game) => game.game_id === Number(game.game_id))
+      this.gameForAnalysis = gameinfo
+    },
+    cleaneDataProbablesHome() {
+      this.lastGetGame = 0
+      this.retries = 3
+      this.teamActive = 'home'
+      this.subsActive = false
+      this.playersHome = []
+      this.gamesContainerWidth = 0
+
+      this.subsTitle = false
+      this.uniformHome = ''
+      this.uniformHomeG = ''
+
+      this.dataPlayersHome = []
+      this.players = this.players.filter(
+        (player) => player.team_id !== this.gameInfoheader.home_team
+      )
+
+      this.homeTeamLogo = ''
+      this.homeTeamName = ''
+      this.homeTeamAbrev = ''
+      this.home_team_id = 0
+      this.substitutionModal = {
+        min: '',
+        in: {
+          playerImg: '',
+          teamImg: '',
+          nationalityimg: '',
+          name: '',
+          position: '',
+          shirt_number: ''
+        },
+        out: {
+          playerImg: '',
+          teamImg: '',
+          nationalityimg: '',
+          name: '',
+          position: '',
+          shirt_number: ''
+        }
+      }
+      this.movil = false
+    },
+    cleaneDataProbablesAway() {
+      this.lastGetGame = 0
+      this.retries = 3
+      this.teamActive = 'home'
+      this.subsActive = false
+
+      this.gamesContainerWidth = 0
+      this.playersAway = []
+      this.subsTitle = false
+
+      this.uniformAway = ''
+      this.uniformAwayG = ''
+
+      this.dataPlayersAway = []
+
+      this.awayTeamLogo = ''
+
+      this.awayTeamName = ''
+      this.players = this.players.filter(
+        (player) => player.team_id !== this.gameInfoheader.away_team
+      )
+
+      this.awayTeamAbrev = ''
+      this.updateComponentAway = 0
+      this.away_team_id = 0
+      this.substitutionModal = {
+        min: '',
+        in: {
+          playerImg: '',
+          teamImg: '',
+          nationalityimg: '',
+          name: '',
+          position: '',
+          shirt_number: ''
+        },
+        out: {
+          playerImg: '',
+          teamImg: '',
+          nationalityimg: '',
+          name: '',
+          position: '',
+          shirt_number: ''
+        }
+      }
+      this.movil = false
+    },
+    cleaneData() {
+      this.lastGetGame = 0
+      this.retries = 3
+      this.teamActive = 'home'
+      this.subsActive = false
+      this.playersHome = []
+      this.gamesContainerWidth = 0
+      this.playersAway = []
+      this.subsTitle = false
+      this.uniformHome = ''
+      this.uniformHomeG = ''
+      this.uniformAway = ''
+      this.uniformAwayG = ''
+      this.dataPlayersHome = []
+      this.dataPlayersAway = []
+      this.homeTeamLogo = ''
+      this.awayTeamLogo = ''
+      this.homeTeamName = ''
+      this.awayTeamName = ''
+      this.homeTeamAbrev = ''
+      this.awayTeamAbrev = ''
+      this.home_team_id = 0
+      this.players = []
+      this.updateComponentAway = 0
+      this.away_team_id = 0
+      this.substitutionModal = {
+        min: '',
+        in: {
+          playerImg: '',
+          teamImg: '',
+          nationalityimg: '',
+          name: '',
+          position: '',
+          shirt_number: ''
+        },
+        out: {
+          playerImg: '',
+          teamImg: '',
+          nationalityimg: '',
+          name: '',
+          position: '',
+          shirt_number: ''
+        }
+      }
+      this.movil = false
+    },
+    getDataSocket() {
+      connectChannel(`lineups.game.` + this.game.game_id, this.socket)
+      connectChannel(`mxm.game.` + this.game.game_id, this.socket)
+      connectChannel(`lineups.bench.game.` + this.game.game_id, this.socket)
+    },
+    resetPlayUpdate(playType, Team, index, playerIndex) {
+      if (playType == 'Substitution') {
+        if (Team == 'Home') {
+          var idsPlayers = this.playersHome[index].substitutionDataID.split('@')
+          var indexChangeHomeOut = this.playersHome.findIndex(
+            (player) => player.playerId == idsPlayers[1]
+          )
+          var indexChangeHomeIn = this.playersHome.findIndex(
+            (player) => player.playerId == idsPlayers[2]
+          )
+          if (indexChangeHomeOut != -1) {
+            this.playersHome[indexChangeHomeOut].substitutionOut = false
+            this.playersHome[indexChangeHomeOut].substitutionMin = ''
+            this.playersHome[indexChangeHomeOut].substitutionDataID = ''
+            this.playersHome[indexChangeHomeOut].idSubstitution = 0
+          }
+          if (indexChangeHomeIn != -1) {
+            this.playersHome[indexChangeHomeIn].substitutionIn = false
+            this.playersHome[indexChangeHomeIn].substitutionMin = ''
+            this.playersHome[indexChangeHomeIn].substitutionDataID = ''
+            this.playersHome[indexChangeHomeIn].idSubstitution = 0
+          }
+        } else {
+          var idsPlayersAway = this.playersAway[index].substitutionDataID.split('@')
+          var indexChangeAwayOut = this.playersAway.findIndex(
+            (player) => player.playerId == idsPlayersAway[1]
+          )
+          var indexChangeAwayIn = this.playersAway.findIndex(
+            (player) => player.playerId == idsPlayersAway[2]
+          )
+          if (indexChangeHomeOut != -1) {
+            this.playersAway[indexChangeAwayOut].substitutionOut = false
+            this.playersAway[indexChangeAwayOut].substitutionMin = ''
+            this.playersAway[indexChangeAwayOut].substitutionDataID = ''
+            this.playersAway[indexChangeAwayOut].idSubstitution = 0
+          }
+          if (indexChangeAwayIn != -1) {
+            this.playersAway[indexChangeAwayIn].substitutionIn = false
+            this.playersAway[indexChangeAwayIn].substitutionMin = ''
+            this.playersAway[indexChangeAwayIn].substitutionDataID = ''
+            this.playersAway[indexChangeAwayIn].idSubstitution = 0
+          }
+        }
+      }
+      if (playType == 'YellowCard') {
+        if (Team == 'Home') {
+          this.playersHome[index].yellowcards = 0
+          this.playersHome[index].yellowcardsMin = 0
+          this.playersHome[index].idyellowcards = 0
+        } else {
+          this.playersAway[index].yellowcards = 0
+          this.playersAway[index].yellowcardsMin = 0
+          this.playersAway[index].idyellowcards = 0
+        }
+      }
+      if (playType == 'RedCard') {
+        if (Team == 'Home') {
+          this.playersHome[index].redcards = 0
+          this.playersHome[index].redcardsMin = 0
+          this.playersHome[index].idredcards = 0
+        } else {
+          this.playersAway[index].redcards = 0
+          this.playersAway[index].redcardsMin = 0
+          this.playersAway[index].idredcards = 0
+        }
+      }
+      if (playType == 'Goals') {
+        if (Team == 'Home') {
+          this.playersHome[playerIndex].goals = this.playersHome[playerIndex].goals - 1
+          this.playersHome[playerIndex].goalsMin.splice(index, 1)
+          this.playersHome[playerIndex].idsGoals.splice(index, 1)
+        } else {
+          this.playersAway[playerIndex].goals = this.playersAway[playerIndex].goals - 1
+          this.playersAway[playerIndex].goalsMin.splice(index, 1)
+          this.playersAway[playerIndex].idsGoals.splice(index, 1)
+        }
+      }
+    },
+    setUpResizeObserver() {
+      if (window.ResizeObserver) {
+        calendarResizeObserver = new ResizeObserver(() => {
+          this.gamesContainerWidth = this.$refs.gamesContainer.clientWidth
+          if (this.gamesContainerWidth < 740) {
+            this.movil = true
+          } else {
+            this.movil = false
+          }
+        })
+        calendarResizeObserver.observe(this.$refs.gamesContainer)
+      } else {
+        throw new Error('Resize observer not supported!')
+      }
+    },
+    async getMXM(game) {
+      try {
+        const axiosInstanceMXM = axios.create({
+          headers: {
+            Authorization: `${this.tokenPremium}`
+          }
+        })
+        const dataMXM = await axiosInstanceMXM.get(this.urlMXM + game)
+
+        for (let index = 0; index < dataMXM.data.plays.length; index++) {
+          if (dataMXM.data.plays[index].event_type_id == 3) {
+            if (dataMXM.data.plays[index].team_id == this.home_team_id) {
+              if (this.players.length > 0) {
+                var idsPlayers = dataMXM.data.plays[index].player_id.split('@')
+                var indexChangeHomeOut = this.players.findIndex(
+                  (player) => player.playerId == idsPlayers[0]
+                )
+                var indexChangeHomeIn = this.players.findIndex(
+                  (player) => player.playerId == idsPlayers[1]
+                )
+                if (indexChangeHomeOut != -1) {
+                  this.players[indexChangeHomeOut].idSubstitution =
+                    dataMXM.data.plays[index].play_id
+                  this.players[indexChangeHomeOut].substitutionOut = true
+                  this.players[indexChangeHomeOut].substitutionMin =
+                    dataMXM.data.plays[index].minute
+                  this.players[indexChangeHomeOut].substitutionDataID =
+                    dataMXM.data.plays[index].team_id + '@' + dataMXM.data.plays[index].player_id
+                }
+                if (indexChangeHomeIn != -1) {
+                  this.players[indexChangeHomeIn].idSubstitution = dataMXM.data.plays[index].play_id
+                  this.players[indexChangeHomeIn].substitutionIn = true
+                  this.players[indexChangeHomeIn].substitutionMin = dataMXM.data.plays[index].minute
+                  this.players[indexChangeHomeIn].substitutionDataID =
+                    dataMXM.data.plays[index].team_id + '@' + dataMXM.data.plays[index].player_id
+                }
+              }
+            } else {
+              if (this.players.length > 0) {
+                var idsPlayersAway = dataMXM.data.plays[index].player_id.split('@')
+                var indexChangeAwayOut = this.players.findIndex(
+                  (player) => player.playerId == idsPlayersAway[0]
+                )
+                var indexChangeAwayIn = this.players.findIndex(
+                  (player) => player.playerId == idsPlayersAway[1]
+                )
+                if (indexChangeAwayOut != -1) {
+                  this.players[indexChangeAwayOut].idSubstitution =
+                    dataMXM.data.plays[index].play_id
+                  this.players[indexChangeAwayOut].substitutionOut = true
+                  this.players[indexChangeAwayOut].substitutionMin =
+                    dataMXM.data.plays[index].minute
+                  this.players[indexChangeAwayOut].substitutionDataID =
+                    dataMXM.data.plays[index].team_id + '@' + dataMXM.data.plays[index].player_id
+                }
+                if (indexChangeAwayIn != -1) {
+                  this.players[indexChangeAwayIn].idSubstitution = dataMXM.data.plays[index].play_id
+                  this.players[indexChangeAwayIn].substitutionIn = true
+                  this.players[indexChangeAwayIn].substitutionMin = dataMXM.data.plays[index].minute
+                  this.players[indexChangeAwayIn].substitutionDataID =
+                    dataMXM.data.plays[index].team_id + '@' + dataMXM.data.plays[index].player_id
+                }
+              }
+            }
+          }
+          if (dataMXM.data.plays[index].event_type_id == 1) {
+            if (dataMXM.data.plays[index].team_id == this.home_team_id) {
+              if (this.players.length > 0) {
+                var indexPlayerGoalHome = this.players.findIndex(
+                  (player) => player.playerId == dataMXM.data.plays[index].player_id
+                )
+                if (indexPlayerGoalHome != -1) {
+                  this.players[indexPlayerGoalHome].goals += 1
+                  this.players[indexPlayerGoalHome].goalsMin.push(dataMXM.data.plays[index].minute)
+                  this.players[indexPlayerGoalHome].idsGoals.push(dataMXM.data.plays[index].play_id)
+                }
+              }
+            } else {
+              if (this.players.length > 0) {
+                var indexPlayerGoalAway = this.players.findIndex(
+                  (player) => player.playerId == dataMXM.data.plays[index].player_id
+                )
+                if (indexPlayerGoalAway != -1) {
+                  this.players[indexPlayerGoalAway].goals += 1
+                  this.players[indexPlayerGoalAway].goalsMin.push(dataMXM.data.plays[index].minute)
+                  this.players[indexPlayerGoalAway].idsGoals.push(dataMXM.data.plays[index].play_id)
+                }
+              }
+            }
+          }
+          if (dataMXM.data.plays[index].event_type_id == 2) {
+            if (dataMXM.data.plays[index].category_id == 8) {
+              if (dataMXM.data.plays[index].team_id == this.home_team_id) {
+                if (this.players.length > 0) {
+                  var indexPlayerYellowHome = this.players.findIndex(
+                    (player) => player.playerId == dataMXM.data.plays[index].player_id
+                  )
+                  if (indexPlayerYellowHome != -1) {
+                    this.players[indexPlayerYellowHome].yellowcards += 1
+                    this.players[indexPlayerYellowHome].yellowcardsMin =
+                      dataMXM.data.plays[index].minute
+                    this.players[indexPlayerYellowHome].idyellowcards =
+                      dataMXM.data.plays[index].play_id
+                  }
+                }
+              } else {
+                if (this.players.length > 0) {
+                  var indexPlayerYellowAway = this.players.findIndex(
+                    (player) => player.playerId == dataMXM.data.plays[index].player_id
+                  )
+                  if (indexPlayerYellowAway != -1) {
+                    this.players[indexPlayerYellowAway].yellowcards += 1
+                    this.players[indexPlayerYellowAway].yellowcardsMin =
+                      dataMXM.data.plays[index].minute
+                    this.players[indexPlayerYellowAway].idyellowcards =
+                      dataMXM.data.plays[index].play_id
+                  }
+                }
+              }
+            }
+            if (dataMXM.data.plays[index].category_id == 9) {
+              if (dataMXM.data.plays[index].team_id == this.home_team_id) {
+                if (this.players.length > 0) {
+                  var indexPlayerRedHome = this.players.findIndex(
+                    (player) => player.playerId == dataMXM.data.plays[index].player_id
+                  )
+                  if (indexPlayerRedHome != -1) {
+                    this.players[indexPlayerRedHome].redcards += 1
+                    this.players[indexPlayerRedHome].redcardsMin = dataMXM.data.plays[index].minute
+                    this.players[indexPlayerRedHome].idredcards = dataMXM.data.plays[index].play_id
+                  }
+                }
+              } else {
+                if (this.players.length > 0) {
+                  var indexPlayerRedAway = this.players.findIndex(
+                    (player) => player.playerId == dataMXM.data.plays[index].player_id
+                  )
+                  if (indexPlayerRedAway != -1) {
+                    this.players[indexPlayerRedAway].redcards += 1
+                    this.players[indexPlayerRedAway].redcardsMin = dataMXM.data.plays[index].minute
+                    this.players[indexPlayerRedAway].idredcards = dataMXM.data.plays[index].play_id
+                  }
+                }
+              }
+            }
+          }
+        }
+      } catch (e) {
+        return Promise.reject(e)
+      }
+    },
+    async getLineupDataProbablesAway(gameid) {
+      try {
+        const axiosInstanceLineUp = axios.create({
+          headers: {
+            Authorization: `${this.tokenPremium}`
+          }
+        })
+        const data = await axiosInstanceLineUp.get(this.url + gameid)
+        if (!data || !data.data) {
+          throw new Error('There is not lineups for this game.')
+        }
+
+        if (data.data.home_team.team_id == this.gameInfoheader.away_team) {
+          for (
+            let index = 0;
+            index < data.data.home_team.starting_lineup[0].lineup.length;
+            index++
+          ) {
+            this.away_team_id = data.data.home_team.team_id
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' + data.data.home_team.team_id + '.svg',
+              'away',
+              1
+            )
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' +
+                data.data.home_team.team_id +
+                '_g.svg',
+              'away',
+              0
+            )
+            var NameArrayAway =
+              data.data.home_team.starting_lineup[0].lineup[index].player_name.split(',')
+            var lastArrayNameAway = NameArrayAway[0].split(' ')
+            var ArrayNameAway = NameArrayAway[1].trim().split(' ')
+            var lastNameAway = ''
+            if (lastArrayNameAway.length == 2 || lastArrayNameAway.length == 1) {
+              if (lastArrayNameAway[0].length < 4) {
+                lastNameAway = lastArrayNameAway[0] + ' ' + lastArrayNameAway[1]
+              } else {
+                lastNameAway = lastArrayNameAway[0]
+              }
+            } else {
+              if (lastArrayNameAway.length == 3) {
+                lastNameAway = lastArrayNameAway[0] + ' ' + lastArrayNameAway[1]
+              } else {
+                if (lastArrayNameAway.length == 4) {
+                  lastNameAway =
+                    lastArrayNameAway[1] + ' ' + lastArrayNameAway[2] + ' ' + lastArrayNameAway[3]
+                }
+              }
+            }
+            var nameAway =
+              ArrayNameAway[ArrayNameAway.length - 1] != ''
+                ? ArrayNameAway[ArrayNameAway.length - 1].charAt(0)
+                : ArrayNameAway[ArrayNameAway.length - 2]
+                  ? ArrayNameAway[ArrayNameAway.length - 2].charAt(0)
+                  : ''
+            lastNameAway = lastNameAway.replace(',', '')
+
+            var newCooAway = data.data.home_team.starting_lineup[0].lineup[index].x
+            newCooAway = Math.abs(newCooAway - 100)
+            // var positionConvert = 100 - ((100 - newCooAway) * 50) / 100;
+            var positionConvert = 100 - ((100 - newCooAway) * 50) / 100
+            positionConvert = positionConvert * 0.9
+
+            this.players.push({
+              team_id: data.data.home_team.team_id,
+              number: data.data.home_team.starting_lineup[0].lineup[index].jersey_number,
+              isFirstTeam: false,
+              name: nameAway + '. ' + lastNameAway,
+              photo:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                data.data.home_team.starting_lineup[0].lineup[index].player_id +
+                '.png',
+              posX: positionConvert + 7,
+              posY: data.data.home_team.starting_lineup[0].lineup[index].y,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0
+            })
+
+            this.awayTeamLogo =
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.home_team.team_id + '.png'
+          }
+          this.playersAway.sort((a, b) =>
+            a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+          )
+        }
+        if (data.data.away_team.team_id == this.gameInfoheader.away_team) {
+          for (
+            let index = 0;
+            index < data.data.away_team.starting_lineup[0].lineup.length;
+            index++
+          ) {
+            this.away_team_id = data.data.away_team.team_id
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' + data.data.away_team.team_id + '.svg',
+              'away',
+              1
+            )
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' +
+                data.data.away_team.team_id +
+                '_g.svg',
+              'away',
+              0
+            )
+            var NameArrayAway =
+              data.data.away_team.starting_lineup[0].lineup[index].player_name.split(',')
+            var lastArrayNameAway = NameArrayAway[0].split(' ')
+            var ArrayNameAway = NameArrayAway[1].trim().split(' ')
+            var lastNameAway = ''
+            if (lastArrayNameAway.length == 2 || lastArrayNameAway.length == 1) {
+              if (lastArrayNameAway[0].length < 4) {
+                lastNameAway = lastArrayNameAway[0] + ' ' + lastArrayNameAway[1]
+              } else {
+                lastNameAway = lastArrayNameAway[0]
+              }
+            } else {
+              if (lastArrayNameAway.length == 3) {
+                lastNameAway = lastArrayNameAway[0] + ' ' + lastArrayNameAway[1]
+              } else {
+                if (lastArrayNameAway.length == 4) {
+                  lastNameAway =
+                    lastArrayNameAway[1] + ' ' + lastArrayNameAway[2] + ' ' + lastArrayNameAway[3]
+                }
+              }
+            }
+            var nameAway =
+              ArrayNameAway[ArrayNameAway.length - 1] != ''
+                ? ArrayNameAway[ArrayNameAway.length - 1].charAt(0)
+                : ArrayNameAway[ArrayNameAway.length - 2]
+                  ? ArrayNameAway[ArrayNameAway.length - 2].charAt(0)
+                  : ''
+            lastNameAway = lastNameAway.replace(',', '')
+
+            var newCooAway = data.data.away_team.starting_lineup[0].lineup[index].x
+
+            // var positionConvert = 100 - ((100 - newCooAway) * 50) / 100;
+            var positionConvert = 100 - ((100 - newCooAway) * 50) / 100
+            positionConvert = positionConvert * 0.9
+
+            this.players.push({
+              team_id: data.data.away_team.team_id,
+              number: data.data.away_team.starting_lineup[0].lineup[index].jersey_number,
+              isFirstTeam: false,
+              name: nameAway + '. ' + lastNameAway,
+              photo:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                data.data.away_team.starting_lineup[0].lineup[index].player_id +
+                '.png',
+              posX:
+                100 - ((100 - data.data.away_team.starting_lineup[0].lineup[index].x) * 50) / 100,
+              posY: data.data.away_team.starting_lineup[0].lineup[index].y,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0
+            })
+
+            this.awayTeamLogo =
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.away_team.team_id + '.png'
+          }
+        }
+      } catch (e) {
+        return Promise.reject(e)
+      }
+    },
+    async getLineupDataProbablesHome(gameid) {
+      try {
+        const axiosInstanceLineUp = axios.create({
+          headers: {
+            Authorization: `${this.tokenPremium}`
+          }
+        })
+        const data = await axiosInstanceLineUp.get(this.url + gameid)
+        if (!data || !data.data) {
+          throw new Error('There is not lineups for this game.')
+        }
+
+        if (data.data.home_team.team_id == this.gameInfoheader.home_team) {
+          this.dataPlayersHome = data.data.home_team.players
+          data.data.home_team.starting_lineup[0].lineup.sort((a, b) =>
+            a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+          )
+          for (
+            let index = 0;
+            index < data.data.home_team.starting_lineup[0].lineup.length;
+            index++
+          ) {
+            this.home_team_id = data.data.home_team.team_id
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' + data.data.home_team.team_id + '.svg',
+              'home',
+              1
+            )
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' +
+                data.data.home_team.team_id +
+                '_g.svg',
+              'home',
+              0
+            )
+            var NameArrayHome =
+              data.data.home_team.starting_lineup[0].lineup[index].player_name.split(',')
+            var lastArrayName = NameArrayHome[0].split(' ')
+            var ArrayName = NameArrayHome[1].trim().split(' ')
+            var lastNameHome = ''
+            if (lastArrayName.length == 2 || lastArrayName.length == 1) {
+              if (lastArrayName[0].length < 4) {
+                lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+              } else {
+                lastNameHome = lastArrayName[0]
+              }
+            } else {
+              if (lastArrayName.length == 3) {
+                lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+              } else {
+                if (lastArrayName.length == 4) {
+                  lastNameHome = lastArrayName[1] + ' ' + lastArrayName[2] + ' ' + lastArrayName[3]
+                }
+              }
+            }
+            var nameHome =
+              ArrayName[ArrayName.length - 1] != ''
+                ? ArrayName[ArrayName.length - 1].charAt(0)
+                : ArrayName[ArrayName.length - 2]
+                  ? ArrayName[ArrayName.length - 2].charAt(0)
+                  : ''
+            lastNameHome = lastNameHome.replace(',', '')
+
+            var newCooHome = data.data.home_team.starting_lineup[0].lineup[index].x
+            var positionConvertHome = (newCooHome * 50) / 100
+
+            this.players.push({
+              team_id: data.data.home_team.team_id,
+              number: data.data.home_team.starting_lineup[0].lineup[index].jersey_number,
+              isFirstTeam: true,
+              name: nameHome + '. ' + lastNameHome,
+              photo:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                data.data.home_team.starting_lineup[0].lineup[index].player_id +
+                '.png',
+              posX: (data.data.home_team.starting_lineup[0].lineup[index].x * 50) / 100,
+              posY: data.data.home_team.starting_lineup[0].lineup[index].y,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0
+            })
+            this.homeTeamLogo =
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.home_team.team_id + '.png'
+          }
+        }
+        if (data.data.away_team.team_id == this.gameInfoheader.home_team) {
+          this.dataPlayersHome = data.data.away_team.players
+          data.data.away_team.starting_lineup[0].lineup.sort((a, b) =>
+            a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+          )
+          for (
+            let index = 0;
+            index < data.data.away_team.starting_lineup[0].lineup.length;
+            index++
+          ) {
+            this.home_team_id = data.data.away_team.team_id
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' + data.data.away_team.team_id + '.svg',
+              'home',
+              1
+            )
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' +
+                data.data.away_team.team_id +
+                '_g.svg',
+              'home',
+              0
+            )
+            var NameArrayHome =
+              data.data.away_team.starting_lineup[0].lineup[index].player_name.split(',')
+            var lastArrayName = NameArrayHome[0].split(' ')
+            var ArrayName = NameArrayHome[1].trim().split(' ')
+            var lastNameHome = ''
+            if (lastArrayName.length == 2 || lastArrayName.length == 1) {
+              if (lastArrayName[0].length < 4) {
+                lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+              } else {
+                lastNameHome = lastArrayName[0]
+              }
+            } else {
+              if (lastArrayName.length == 3) {
+                lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+              } else {
+                if (lastArrayName.length == 4) {
+                  lastNameHome = lastArrayName[1] + ' ' + lastArrayName[2] + ' ' + lastArrayName[3]
+                }
+              }
+            }
+            var nameHome =
+              ArrayName[ArrayName.length - 1] != ''
+                ? ArrayName[ArrayName.length - 1].charAt(0)
+                : ArrayName[ArrayName.length - 2]
+                  ? ArrayName[ArrayName.length - 2].charAt(0)
+                  : ''
+            lastNameHome = lastNameHome.replace(',', '')
+
+            var newX = data.data.away_team.starting_lineup[0].lineup[index].x
+            newX = Math.abs(newX - 100)
+            var positionConvertHome = (newX * 50) / 100
+            var newY = data.data.away_team.starting_lineup[0].lineup[index].y
+            newY = Math.abs(newY - 100)
+            this.players.push({
+              team_id: data.data.away_team.team_id,
+              number: data.data.away_team.starting_lineup[0].lineup[index].jersey_number,
+              isFirstTeam: true,
+              name: nameHome + '. ' + lastNameHome,
+              photo:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                data.data.away_team.starting_lineup[0].lineup[index].player_id +
+                '.png',
+              posX: positionConvertHome - 2,
+              posY: newY - 9,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0
+            })
+
+            this.homeTeamLogo =
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.away_team.team_id + '.png'
+          }
+        }
+      } catch (e) {
+        return Promise.reject(e)
+      }
+    },
+    async getLineUp(game) {
+      connectSocket()
+      if (this.playersHome.length) {
+        return
+      }
+      try {
+        const axiosInstanceLineUp = axios.create({
+          headers: {
+            Authorization: `${this.tokenPremium}`
+          }
+        })
+        const data = await axiosInstanceLineUp.get(this.url + game)
+        if (!data || !data.data) {
+          throw new Error('There is not lineups for this game.')
+        }
+        this.players = []
+        this.dataPlayersHome = data.data.home_team.players
+        this.dataPlayersAway = data.data.away_team.players
+        data.data.home_team.starting_lineup[0].lineup.sort((a, b) =>
+          a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+        )
+        for (let index = 0; index < data.data.home_team.starting_lineup[0].lineup.length; index++) {
+          this.home_team_id = data.data.home_team.team_id
+          this.imageExists(
+            'https://golstatsimages.blob.core.windows.net/jersey-teams/' + data.data.home_team.team_id + '.svg',
+            'home',
+            1
+          )
+          this.imageExists(
+            'https://golstatsimages.blob.core.windows.net/jersey-teams/' + data.data.home_team.team_id + '_g.svg',
+            'home',
+            0
+          )
+          var NameArrayHome =
+            data.data.home_team.starting_lineup[0].lineup[index].player_name.split(',')
+          var lastArrayName = NameArrayHome[0].split(' ')
+          var ArrayName = NameArrayHome[1].trim().split(' ')
+          var lastNameHome = ''
+          if (lastArrayName.length == 2 || lastArrayName.length == 1) {
+            if (lastArrayName[0].length < 4) {
+              lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+            } else {
+              lastNameHome = lastArrayName[0]
+            }
+          } else {
+            if (lastArrayName.length == 3) {
+              lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+            } else {
+              if (lastArrayName.length == 4) {
+                lastNameHome = lastArrayName[1] + ' ' + lastArrayName[2] + ' ' + lastArrayName[3]
+              }
+            }
+          }
+          var nameHome =
+            ArrayName[ArrayName.length - 1] != ''
+              ? ArrayName[ArrayName.length - 1].charAt(0)
+              : ArrayName[ArrayName.length - 2]
+                ? ArrayName[ArrayName.length - 2].charAt(0)
+                : ''
+          lastNameHome = lastNameHome.replace(',', '')
+          var abrevNamePlayerHome = nameHome + '. ' + lastNameHome
+
+          var newCooHome = data.data.home_team.starting_lineup[0].lineup[index].x
+          var positionConvertHome = (newCooHome * 50) / 100
+          var indexPlayerDataHome = data.data.home_team.players.findIndex(
+            (player) =>
+              player.player_id == data.data.home_team.starting_lineup[0].lineup[index].player_id
+          )
+          this.players.push({
+            playerId: data.data.home_team.starting_lineup[0].lineup[index].player_id,
+            number: data.data.home_team.starting_lineup[0].lineup[index].jersey_number,
+            isFirstTeam: true,
+            name: nameHome + '. ' + lastNameHome,
+            photo:
+              'https://golstatsimages.blob.core.windows.net/players-profile/' +
+              data.data.home_team.starting_lineup[0].lineup[index].player_id +
+              '.png',
+            posX: (data.data.home_team.starting_lineup[0].lineup[index].x * 50) / 100,
+            posY: data.data.home_team.starting_lineup[0].lineup[index].y,
+            goals: 0,
+            yellowcards: 0,
+            redcards: 0,
+            goalsMin: [],
+            yellowcardsMin: 0,
+            redcardsMin: 0,
+            idyellowcards: 0,
+            idredcards: 0,
+            idsGoals: [],
+            idSubstitution: 0
+          })
+          this.playersHome.push({
+            played: true,
+            name: data.data.home_team.starting_lineup[0].lineup[index].player_name,
+            position:
+              this.positions[data.data.home_team.players[indexPlayerDataHome].position_id - 1].name,
+            position_id: data.data.home_team.players[indexPlayerDataHome].position_id - 1,
+            imgPlayer:
+              'https://golstatsimages.blob.core.windows.net/players-profile/' +
+              data.data.home_team.starting_lineup[0].lineup[index].player_id +
+              '.png',
+            nationality: data.data.home_team.players[indexPlayerDataHome].nationality
+              ? data.data.home_team.players[indexPlayerDataHome].nationality.substring(0, 3)
+              : '',
+            imgNationality: data.data.home_team.players[indexPlayerDataHome].nationality_photo,
+            substitutionIn: false,
+            substitutionOut: false,
+            abrevNamePlayer: abrevNamePlayerHome,
+            imgTeam:
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.home_team.team_id + '.png',
+            substitutionMin: '',
+            substitutionDataID: '',
+            shirt_number: data.data.home_team.starting_lineup[0].lineup[index].jersey_number,
+            positionX: data.data.home_team.starting_lineup[0].lineup[index].y - 13,
+            positionY: positionConvertHome * 0.9,
+            positionXOrigin: data.data.home_team.starting_lineup[0].lineup[index].y - 17,
+            positionYOrigin: data.data.home_team.starting_lineup[0].lineup[index].x - 2,
+            playerId: data.data.home_team.starting_lineup[0].lineup[index].player_id,
+            goals: 0,
+            yellowcards: 0,
+            redcards: 0,
+            goalsMin: [],
+            yellowcardsMin: 0,
+            redcardsMin: 0,
+            idyellowcards: 0,
+            idredcards: 0,
+            idsGoals: [],
+            idSubstitution: 0,
+            isbench: false,
+            id_team: data.data.home_team.team_id
+          })
+          this.homeTeamLogo =
+            'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.home_team.team_id + '.png'
+        }
+        this.playersHome.sort((a, b) =>
+          a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+        )
+        if (data.data.home_team.bench) {
+          for (let index = 0; index < data.data.home_team.bench.length; index++) {
+            this.subsTitle = true
+            var NameArrayHomeBench = data.data.home_team.bench[index].playerName.split(',')
+            var lastArrayNameBench = NameArrayHomeBench[0].split(' ')
+            var ArrayNameBench = NameArrayHomeBench[1].trim().split(' ')
+            var lastNameHomeBench = ''
+            if (lastArrayNameBench.length == 2 || lastArrayNameBench.length == 1) {
+              if (lastArrayNameBench[0].length < 4) {
+                lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
+              } else {
+                lastNameHomeBench = lastArrayNameBench[0]
+              }
+            } else {
+              if (lastArrayNameBench.length == 3) {
+                lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
+              } else {
+                if (lastArrayNameBench.length == 4) {
+                  lastNameHomeBench =
+                    lastArrayNameBench[1] +
+                    ' ' +
+                    lastArrayNameBench[2] +
+                    ' ' +
+                    lastArrayNameBench[3]
+                }
+              }
+            }
+            var nameHomeBench =
+              ArrayNameBench[ArrayNameBench.length - 1] != ''
+                ? ArrayNameBench[ArrayNameBench.length - 1].charAt(0)
+                : ArrayNameBench[ArrayNameBench.length - 2]
+                  ? ArrayNameBench[ArrayNameBench.length - 2].charAt(0)
+                  : ''
+            lastNameHomeBench = lastNameHomeBench.replace(',', '')
+            var abrevNamePlayerHomeBench = nameHomeBench + '. ' + lastNameHomeBench
+            var indexPlayerDataHomeBench = data.data.home_team.players.findIndex(
+              (player) => player.player_id == data.data.home_team.bench[index].playerID
+            )
+            this.playersHome.push({
+              played: false,
+              name: data.data.home_team.bench[index].playerName,
+              position:
+                indexPlayerDataHomeBench != -1
+                  ? this.positions[
+                      data.data.home_team.players[indexPlayerDataHomeBench].position_id - 1
+                    ].name
+                  : '',
+              position_id: data.data.home_team.players[indexPlayerDataHomeBench].position_id,
+              imgPlayer:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                data.data.home_team.bench[index].playerID +
+                '.png',
+              nationality:
+                indexPlayerDataHomeBench != -1
+                  ? data.data.home_team.players[indexPlayerDataHomeBench].nationality
+                    ? data.data.home_team.players[indexPlayerDataHomeBench].nationality.substring(
+                        0,
+                        3
+                      )
+                    : ''
+                  : '',
+              imgNationality:
+                indexPlayerDataHomeBench != -1
+                  ? data.data.home_team.players[indexPlayerDataHomeBench].nationality_photo
+                  : '',
+              substitutionIn: false,
+              substitutionOut: false,
+              abrevNamePlayer: abrevNamePlayerHomeBench,
+              imgTeam:
+                'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.home_team.team_id + '.png',
+              substitutionMin: '',
+              substitutionDataID: '',
+              shirt_number: data.data.home_team.bench[index].jerseyNumber,
+              positionX: '',
+              positionY: '',
+              positionXOrigin: '',
+              positionYOrigin: '',
+              playerId: data.data.home_team.bench[index].playerID,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0,
+              isbench: true,
+              id_team: data.data.home_team.team_id
+            })
+          }
+          this.playersHome.sort((a, b) =>
+            a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+          )
+        }
+        for (let index = 0; index < data.data.away_team.starting_lineup[0].lineup.length; index++) {
+          this.away_team_id = data.data.away_team.team_id
+          this.imageExists(
+            'https://golstatsimages.blob.core.windows.net/jersey-teams/' + data.data.away_team.team_id + '.svg',
+            'away',
+            1
+          )
+          this.imageExists(
+            'https://golstatsimages.blob.core.windows.net/jersey-teams/' + data.data.away_team.team_id + '_g.svg',
+            'away',
+            0
+          )
+          var NameArrayAway =
+            data.data.away_team.starting_lineup[0].lineup[index].player_name.split(',')
+          var lastArrayNameAway = NameArrayAway[0].split(' ')
+          var ArrayNameAway = NameArrayAway[1].trim().split(' ')
+          var lastNameAway = ''
+          if (lastArrayNameAway.length == 2 || lastArrayNameAway.length == 1) {
+            if (lastArrayNameAway[0].length < 4) {
+              lastNameAway = lastArrayNameAway[0] + ' ' + lastArrayNameAway[1]
+            } else {
+              lastNameAway = lastArrayNameAway[0]
+            }
+          } else {
+            if (lastArrayNameAway.length == 3) {
+              lastNameAway = lastArrayNameAway[0] + ' ' + lastArrayNameAway[1]
+            } else {
+              if (lastArrayNameAway.length == 4) {
+                lastNameAway =
+                  lastArrayNameAway[1] + ' ' + lastArrayNameAway[2] + ' ' + lastArrayNameAway[3]
+              }
+            }
+          }
+          var nameAway =
+            ArrayNameAway[ArrayName.length - 1] != ''
+              ? ArrayNameAway[ArrayNameAway.length - 1].charAt(0)
+              : ArrayNameAway[ArrayNameAway.length - 2]
+                ? ArrayNameAway[ArrayNameAway.length - 2].charAt(0)
+                : ''
+          lastNameAway = lastNameAway.replace(',', '')
+          var abrevNamePlayerAway = nameAway + '. ' + lastNameAway
+
+          var newCooAway = data.data.away_team.starting_lineup[0].lineup[index].x
+
+          // var positionConvert = 100 - ((100 - newCooAway) * 50) / 100;
+          var positionConvert = 100 - ((100 - newCooAway) * 50) / 100
+          positionConvert = positionConvert * 0.9
+          var indexPlayerData = data.data.away_team.players.findIndex(
+            (player) =>
+              player.player_id == data.data.away_team.starting_lineup[0].lineup[index].player_id
+          )
+          this.players.push({
+            playerId: data.data.away_team.starting_lineup[0].lineup[index].player_id,
+            number: data.data.away_team.starting_lineup[0].lineup[index].jersey_number,
+            isFirstTeam: false,
+            name: nameAway + '. ' + lastNameAway,
+            photo:
+              'https://golstatsimages.blob.core.windows.net/players-profile/' +
+              data.data.away_team.starting_lineup[0].lineup[index].player_id +
+              '.png',
+            posX: 100 - ((100 - data.data.away_team.starting_lineup[0].lineup[index].x) * 50) / 100,
+            posY: data.data.away_team.starting_lineup[0].lineup[index].y,
+            goals: 0,
+            yellowcards: 0,
+            redcards: 0,
+            goalsMin: [],
+            yellowcardsMin: 0,
+            redcardsMin: 0,
+            idyellowcards: 0,
+            idredcards: 0,
+            idsGoals: [],
+            idSubstitution: 0
+          })
+          this.playersAway.push({
+            played: true,
+            name: data.data.away_team.starting_lineup[0].lineup[index].player_name,
+            position:
+              this.positions[data.data.away_team.players[indexPlayerData].position_id - 1].name,
+            position_id: data.data.away_team.players[indexPlayerData].position_id,
+            imgPlayer:
+              'https://golstatsimages.blob.core.windows.net/players-profile/' +
+              data.data.away_team.starting_lineup[0].lineup[index].player_id +
+              '.png',
+            nationality: data.data.away_team.players[indexPlayerData].nationality
+              ? data.data.away_team.players[indexPlayerData].nationality.substring(0, 3)
+              : '',
+            imgNationality: data.data.away_team.players[indexPlayerData].nationality_photo,
+            substitutionIn: false,
+            substitutionOut: false,
+            abrevNamePlayer: abrevNamePlayerAway,
+            imgTeam:
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.away_team.team_id + '.png',
+            substitutionMin: '',
+            substitutionDataID: '',
+            shirt_number: data.data.away_team.starting_lineup[0].lineup[index].jersey_number,
+            positionX: data.data.away_team.starting_lineup[0].lineup[index].y - 13,
+            positionY: positionConvert,
+            positionXOrigin: data.data.away_team.starting_lineup[0].lineup[index].y - 17,
+            positionYOrigin: data.data.away_team.starting_lineup[0].lineup[index].x - 7,
+            playerId: data.data.away_team.starting_lineup[0].lineup[index].player_id,
+            goals: 0,
+            yellowcards: 0,
+            redcards: 0,
+            goalsMin: [],
+            yellowcardsMin: 0,
+            redcardsMin: 0,
+            idyellowcards: 0,
+            idredcards: 0,
+            idsGoals: [],
+            idSubstitution: 0,
+            isbench: false,
+            id_team: data.data.away_team.team_id
+          })
+          this.awayTeamLogo =
+            'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.away_team.team_id + '.png'
+        }
+        this.playersAway.sort((a, b) =>
+          a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+        )
+        if (data.data.away_team.bench) {
+          for (let index = 0; index < data.data.away_team.bench.length; index++) {
+            this.subsTitle = true
+            var NameArrayAwayBench = data.data.away_team.bench[index].playerName.split(',')
+            var lastArrayNameBenchAway = NameArrayAwayBench[0].split(' ')
+            var ArrayNameBenchAway = NameArrayAwayBench[1].trim().split(' ')
+            var lastNameAwayBench = ''
+            if (lastArrayNameBenchAway.length == 2 || lastArrayNameBenchAway.length == 1) {
+              if (lastArrayNameBenchAway[0].length < 4) {
+                lastNameAwayBench = lastArrayNameBenchAway[0] + ' ' + lastArrayNameBenchAway[1]
+              } else {
+                lastNameAwayBench = lastArrayNameBenchAway[0]
+              }
+            } else {
+              if (lastArrayNameBenchAway.length == 3) {
+                lastNameAwayBench = lastArrayNameBenchAway[0] + ' ' + lastArrayNameBenchAway[1]
+              } else {
+                if (lastArrayNameBenchAway.length == 4) {
+                  lastNameAwayBench =
+                    lastArrayNameBenchAway[1] +
+                    ' ' +
+                    lastArrayNameBenchAway[2] +
+                    ' ' +
+                    lastArrayNameBenchAway[3]
+                }
+              }
+            }
+            var TnameBenchAway =
+              ArrayNameBenchAway[ArrayNameBenchAway.length - 1] != ''
+                ? ArrayNameBenchAway[ArrayNameBenchAway.length - 1].charAt(0)
+                : ArrayNameBenchAway[ArrayNameBenchAway.length - 2]
+                  ? ArrayNameBenchAway[ArrayNameBenchAway.length - 2].charAt(0)
+                  : ''
+            lastNameAwayBench = lastNameAwayBench.replace(',', '')
+            var abrevNamePlayerAwayBench = TnameBenchAway + '. ' + lastNameAwayBench
+            var indexPlayerDataAwayBench = data.data.away_team.players.findIndex(
+              (player) => player.player_id == data.data.away_team.bench[index].playerID
+            )
+            this.playersAway.push({
+              played: false,
+              name: data.data.away_team.bench[index].playerName,
+              position:
+                indexPlayerDataAwayBench != -1
+                  ? this.positions[
+                      data.data.away_team.players[indexPlayerDataAwayBench].position_id - 1
+                    ].name
+                  : '',
+              position_id: data.data.away_team.players[indexPlayerDataAwayBench].position_id,
+              imgPlayer:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                data.data.away_team.bench[index].playerID +
+                '.png',
+              nationality:
+                indexPlayerDataAwayBench != -1
+                  ? data.data.away_team.players[indexPlayerDataAwayBench].nationality
+                    ? data.data.away_team.players[indexPlayerDataAwayBench].nationality.substring(
+                        0,
+                        3
+                      )
+                    : ''
+                  : '',
+              imgNationality:
+                indexPlayerDataAwayBench != -1
+                  ? data.data.away_team.players[indexPlayerDataAwayBench].nationality_photo
+                  : '',
+              substitutionIn: false,
+              substitutionOut: false,
+              abrevNamePlayer: abrevNamePlayerAwayBench,
+              imgTeam:
+                'https://golstatsimages.blob.core.windows.net/teams-80/' + data.data.away_team.team_id + '.png',
+              substitutionMin: '',
+              substitutionDataID: '',
+              shirt_number: data.data.away_team.bench[index].jerseyNumber,
+              positionX: '',
+              positionY: '',
+              positionXOrigin: '',
+              positionYOrigin: '',
+              playerId: data.data.away_team.bench[index].playerID,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0,
+              isbench: true,
+              id_team: data.data.away_team.team_id
+            })
+          }
+          this.playersAway.sort((a, b) =>
+            a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+          )
+        }
+        //if (!this.game.prematch) {
+        this.getMXM(game)
+        //}
+      } catch (e) {
+        return Promise.reject(e)
+      }
+    },
+    closeChange() {
+      this.subsActive = false
+    },
+    imageExists(image_url, team, type) {
+      var http = new XMLHttpRequest()
+      var requestFlag = 0
+      if (team == 'away') {
+        if (type == 1) {
+          if (this.uniformAway == '') {
+            http.open('HEAD', image_url, false)
+            http.send()
+            requestFlag = 1
+          }
+        } else {
+          if (this.uniformAwayG == '') {
+            http.open('HEAD', image_url, false)
+            http.send()
+            requestFlag = 1
+          }
+        }
+      } else {
+        if (type == 1) {
+          if (this.uniformHome == '') {
+            http.open('HEAD', image_url, false)
+            http.send()
+            requestFlag = 1
+          }
+        } else {
+          if (this.uniformHomeG == '') {
+            http.open('HEAD', image_url, false)
+            http.send()
+            requestFlag = 1
+          }
+        }
+      }
+      if (requestFlag == 1) {
+        if (http.status == 200) {
+          if (team == 'away') {
+            if (type == 1) {
+              this.uniformAway = 'url(' + image_url + ')'
+            } else {
+              this.uniformAwayG = 'url(' + image_url + ')'
+            }
+          } else {
+            if (type == 1) {
+              this.uniformHome = 'url(' + image_url + ')'
+            } else {
+              this.uniformHomeG = 'url(' + image_url + ')'
+            }
+          }
+        } else {
+          if (team == 'away') {
+            if (type == 1) {
+              this.uniformAway =
+                'url(https://golstatsimages.blob.core.windows.net/jersey-teams/default_visita.svg)'
+            } else {
+              this.uniformAwayG =
+                'url(https://golstatsimages.blob.core.windows.net/jersey-teams/default_visita_g.svg)'
+            }
+          } else {
+            if (type == 1) {
+              this.uniformHome =
+                'url(https://golstatsimages.blob.core.windows.net/jersey-teams/default_local.svg)'
+            } else {
+              this.uniformHomeG =
+                'url(https://golstatsimages.blob.core.windows.net/jersey-teams/default_local_g.svg)'
+            }
+          }
+        }
+      }
+    },
+    viewChange(ids) {
+      var idSubstitution = ids.split('@')
+      if (idSubstitution[0] == this.home_team_id) {
+        var indexChangeHomeOut = this.playersHome.findIndex(
+          (player) => player.playerId == idSubstitution[1]
+        )
+        var indexChangeHomeIn = this.playersHome.findIndex(
+          (player) => player.playerId == idSubstitution[2]
+        )
+        if (indexChangeHomeOut != -1) {
+          this.substitutionModal.min = this.playersHome[indexChangeHomeOut].substitutionMin
+          this.substitutionModal.in.name = this.playersHome[indexChangeHomeOut].abrevNamePlayer
+          this.substitutionModal.in.teamImg = this.playersHome[indexChangeHomeOut].imgTeam
+          this.substitutionModal.in.shirt_number = this.playersHome[indexChangeHomeOut].shirt_number
+          this.substitutionModal.in.playerImg = this.playersHome[indexChangeHomeOut].imgPlayer
+          this.substitutionModal.in.nationalityimg =
+            this.playersHome[indexChangeHomeOut].imgNationality
+        } else {
+          this.substitutionModal.in.name = ''
+          this.substitutionModal.in.teamImg = ''
+          this.substitutionModal.in.shirt_number = ''
+          this.substitutionModal.in.playerImg = ''
+          this.substitutionModal.in.nationalityimg = ''
+        }
+        if (indexChangeHomeIn != -1) {
+          this.substitutionModal.out.name = this.playersHome[indexChangeHomeIn].abrevNamePlayer
+          this.substitutionModal.out.teamImg = this.playersHome[indexChangeHomeIn].imgTeam
+          this.substitutionModal.out.playerImg = this.playersHome[indexChangeHomeIn].imgPlayer
+          this.substitutionModal.out.nationalityimg =
+            this.playersHome[indexChangeHomeIn].imgNationality
+          this.substitutionModal.out.shirt_number = this.playersHome[indexChangeHomeIn].shirt_number
+        } else {
+          this.substitutionModal.out.name = ''
+          this.substitutionModal.out.teamImg = ''
+          this.substitutionModal.out.shirt_number = ''
+          this.substitutionModal.out.playerImg = ''
+          this.substitutionModal.out.nationalityimg = ''
+        }
+      } else {
+        var indexChangeAwayOut = this.playersAway.findIndex(
+          (player) => player.playerId == idSubstitution[1]
+        )
+        var indexChangeAwayIn = this.playersAway.findIndex(
+          (player) => player.playerId == idSubstitution[2]
+        )
+        if (indexChangeAwayOut != -1) {
+          this.substitutionModal.min = this.playersAway[indexChangeAwayOut].substitutionMin
+          this.substitutionModal.in.name = this.playersAway[indexChangeAwayOut].abrevNamePlayer
+          this.substitutionModal.in.teamImg = this.playersAway[indexChangeAwayOut].imgTeam
+          this.substitutionModal.in.playerImg = this.playersAway[indexChangeAwayOut].imgPlayer
+          this.substitutionModal.in.nationalityimg =
+            this.playersAway[indexChangeAwayOut].imgNationality
+          this.substitutionModal.in.shirt_number = this.playersAway[indexChangeAwayOut].shirt_number
+        } else {
+          this.substitutionModal.in.name = ''
+          this.substitutionModal.in.teamImg = ''
+          this.substitutionModal.in.shirt_number = ''
+          this.substitutionModal.in.playerImg = ''
+          this.substitutionModal.in.nationalityimg = ''
+        }
+        if (indexChangeAwayIn != -1) {
+          this.substitutionModal.out.name = this.playersAway[indexChangeAwayIn].abrevNamePlayer
+          this.substitutionModal.out.teamImg = this.playersAway[indexChangeAwayIn].imgTeam
+          this.substitutionModal.out.playerImg = this.playersAway[indexChangeAwayIn].imgPlayer
+          this.substitutionModal.out.nationalityimg =
+            this.playersAway[indexChangeAwayIn].imgNationality
+          this.substitutionModal.out.shirt_number = this.playersAway[indexChangeAwayIn].shirt_number
+        } else {
+          this.substitutionModal.out.name = ''
+          this.substitutionModal.out.teamImg = ''
+          this.substitutionModal.out.shirt_number = ''
+          this.substitutionModal.out.playerImg = ''
+          this.substitutionModal.out.nationalityimg = ''
+        }
+      }
+      this.subsActive = true
+    },
+    viewLineupTeam(opt) {
+      this.teamActive = opt
+    }
+  },
+
+  sockets: {
+    new_bench([channelName, benchEvent]) {
+      if (benchEvent[this.home_team_id]) {
+        this.playersHome = this.playersHome.filter(function (el) {
+          return !el.isbench
+        })
+        for (let index = 0; index < benchEvent[this.home_team_id].length; index++) {
+          if (!benchEvent[this.home_team_id][index].isTitular) {
+            this.subsTitle = true
+            var NameArrayHomeBench = benchEvent[this.home_team_id][index].playerName.split(',')
+            var lastArrayNameBench = NameArrayHomeBench[0].split(' ')
+            var ArrayNameBench = NameArrayHomeBench[1].trim().split(' ')
+            var lastNameHomeBench = ''
+            if (lastArrayNameBench.length == 2 || lastArrayNameBench.length == 1) {
+              if (lastArrayNameBench[0].length < 4) {
+                lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
+              } else {
+                lastNameHomeBench = lastArrayNameBench[0]
+              }
+            } else {
+              if (lastArrayNameBench.length == 3) {
+                lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
+              } else {
+                if (lastArrayNameBench.length == 4) {
+                  lastNameHomeBench =
+                    lastArrayNameBench[1] +
+                    ' ' +
+                    lastArrayNameBench[2] +
+                    ' ' +
+                    lastArrayNameBench[3]
+                }
+              }
+            }
+            var nameHomeBench =
+              ArrayNameBench[ArrayNameBench.length - 1] != ''
+                ? ArrayNameBench[ArrayNameBench.length - 1].charAt(0)
+                : ArrayNameBench[ArrayNameBench.length - 2]
+                  ? ArrayNameBench[ArrayNameBench.length - 2].charAt(0)
+                  : ''
+            lastNameHomeBench = lastNameHomeBench.replace(',', '')
+            var abrevNamePlayerHomeBench = nameHomeBench + '. ' + lastNameHomeBench
+            var indexPlayerDataHomeBench = this.dataPlayersHome.findIndex(
+              (player) => player.player_id == benchEvent[this.home_team_id][index].playerID
+            )
+            this.playersHome.push({
+              played: false,
+              name: benchEvent[this.home_team_id][index].playerName,
+              position:
+                indexPlayerDataHomeBench != -1
+                  ? this.positions[this.dataPlayersHome[indexPlayerDataHomeBench].position_id - 1]
+                      .name
+                  : '',
+              position_id: this.dataPlayersHome[indexPlayerDataHomeBench].position_id,
+              imgPlayer:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                benchEvent[this.home_team_id][index].playerID +
+                '.png',
+              nationality:
+                indexPlayerDataHomeBench != -1
+                  ? this.dataPlayersHome[indexPlayerDataHomeBench].nationality
+                    ? this.dataPlayersHome[indexPlayerDataHomeBench].nationality.substring(0, 3)
+                    : ''
+                  : '',
+              imgNationality:
+                indexPlayerDataHomeBench != -1
+                  ? this.dataPlayersHome[indexPlayerDataHomeBench].nationality_photo
+                  : '',
+              substitutionIn: false,
+              substitutionOut: false,
+              abrevNamePlayer: abrevNamePlayerHomeBench,
+              imgTeam: 'https://golstatsimages.blob.core.windows.net/teams-80/' + this.home_team_id + '.png',
+              substitutionMin: '',
+              substitutionDataID: '',
+              shirt_number: benchEvent[this.home_team_id][index].jerseyNumber,
+              positionX: '',
+              positionY: '',
+              positionXOrigin: '',
+              positionYOrigin: '',
+              playerId: benchEvent[this.home_team_id][index].playerID,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0,
+              isbench: true
+            })
+          }
+        }
+        this.playersHome.sort((a, b) =>
+          a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+        )
+      }
+
+      if (benchEvent[this.away_team_id]) {
+        this.playersAway = this.playersAway.filter(function (el) {
+          return !el.isbench
+        })
+        for (let index = 0; index < benchEvent[this.away_team_id].length; index++) {
+          if (!benchEvent[this.away_team_id][index].isTitular) {
+            this.subsTitle = true
+            var NameArrayAwayBench = benchEvent[this.away_team_id][index].playerName.split(',')
+            var lastArrayNameBenchAway = NameArrayAwayBench[0].split(' ')
+            var ArrayNameBenchAway = NameArrayHomeBench[1].trim().split(' ')
+            var lastNameAwayBench = ''
+            if (lastArrayNameBenchAway.length == 2 || lastArrayNameBenchAway.length == 1) {
+              if (lastArrayNameBenchAway[0].length < 4) {
+                lastNameAwayBench = lastArrayNameBenchAway[0] + ' ' + lastArrayNameBenchAway[1]
+              } else {
+                lastNameAwayBench = lastArrayNameBenchAway[0]
+              }
+            } else {
+              if (lastArrayNameBenchAway.length == 3) {
+                lastNameAwayBench = lastArrayNameBenchAway[0] + ' ' + lastArrayNameBenchAway[1]
+              } else {
+                if (lastArrayNameBenchAway.length == 4) {
+                  lastNameAwayBench =
+                    lastArrayNameBenchAway[1] +
+                    ' ' +
+                    lastArrayNameBenchAway[2] +
+                    ' ' +
+                    lastArrayNameBenchAway[3]
+                }
+              }
+            }
+            var nameHomeBenchAway =
+              ArrayNameBenchAway[ArrayNameBenchAway.length - 1] != ''
+                ? ArrayNameBenchAway[ArrayNameBenchAway.length - 1].charAt(0)
+                : ArrayNameBenchAway[ArrayNameBenchAway.length - 2]
+                  ? ArrayNameBenchAway[ArrayNameBenchAway.length - 2].charAt(0)
+                  : ''
+            lastNameAwayBench = lastNameAwayBench.replace(',', '')
+            var abrevNamePlayerAwayBench = nameHomeBenchAway + '. ' + lastNameAwayBench
+            var indexPlayerDataAwayBench = this.dataPlayersAway.findIndex(
+              (player) => player.player_id == benchEvent[this.away_team_id][index].playerID
+            )
+            this.playersAway.push({
+              played: false,
+              name: benchEvent[this.away_team_id][index].playerName,
+              position:
+                indexPlayerDataAwayBench != -1
+                  ? this.positions[this.dataPlayersAway[indexPlayerDataAwayBench].position_id - 1]
+                      .name
+                  : '',
+              position_id: this.dataPlayersAway[indexPlayerDataAwayBench].position_id,
+              imgPlayer:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                benchEvent[this.away_team_id][index].playerID +
+                '.png',
+              nationality:
+                indexPlayerDataAwayBench != -1
+                  ? this.dataPlayersAway[indexPlayerDataAwayBench].nationality
+                    ? this.dataPlayersAway[indexPlayerDataAwayBench].nationality.substring(0, 3)
+                    : ''
+                  : '',
+              imgNationality:
+                indexPlayerDataAwayBench != -1
+                  ? this.dataPlayersAway[indexPlayerDataAwayBench].nationality_photo
+                  : '',
+              substitutionIn: false,
+              substitutionOut: false,
+              abrevNamePlayer: abrevNamePlayerAwayBench,
+              imgTeam: 'https://golstatsimages.blob.core.windows.net/teams-80/' + this.away_team_id + '.png',
+              substitutionMin: '',
+              substitutionDataID: '',
+              shirt_number: benchEvent[this.away_team_id][index].jerseyNumber,
+              positionX: '',
+              positionY: '',
+              positionXOrigin: '',
+              positionYOrigin: '',
+              playerId: benchEvent[this.away_team_id][index].playerID,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0,
+              isbench: true
+            })
+          }
+        }
+        this.playersAway.sort((a, b) =>
+          a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+        )
+      }
+    },
+    new_lineup([channelName, gameEvent]) {
+      if (gameEvent.team_id == gameEvent.home_team.team_id) {
+        if (this.playersHome.length == 0) {
+          this.dataPlayersHome = gameEvent.home_team.players
+
+          for (let index = 0; index < gameEvent.data.length; index++) {
+            this.home_team_id = gameEvent.team_id
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' + gameEvent.team_id + '.svg',
+              'home',
+              1
+            )
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' + gameEvent.team_id + '_g.svg',
+              'home',
+              0
+            )
+            var NameArrayHome = gameEvent.data[index].player_name.split(',')
+            var lastArrayName = NameArrayHome[0].split(' ')
+            var ArrayName = NameArrayHome[1].trim().split(' ')
+            var lastNameHome = ''
+            if (lastArrayName.length == 2 || lastArrayName.length == 1) {
+              if (lastArrayName[0].length < 4) {
+                lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+              } else {
+                lastNameHome = lastArrayName[0]
+              }
+            } else {
+              if (lastArrayName.length == 3) {
+                lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+              } else {
+                if (lastArrayName.length == 4) {
+                  lastNameHome = lastArrayName[1] + ' ' + lastArrayName[2] + ' ' + lastArrayName[3]
+                }
+              }
+            }
+            var nameHome =
+              ArrayName[ArrayName.length - 1] != ''
+                ? ArrayName[ArrayName.length - 1].charAt(0)
+                : ArrayName[ArrayName.length - 2]
+                  ? ArrayName[ArrayName.length - 2].charAt(0)
+                  : ''
+            lastNameHome = lastNameHome.replace(',', '')
+            var abrevNamePlayerHome = nameHome + '. ' + lastNameHome
+
+            var newCooHome = gameEvent.data[index].x
+            var positionConvertHome = (newCooHome * 50) / 100
+            var indexPlayerDataHome = gameEvent.home_team.players.findIndex(
+              (player) => player.player_id == gameEvent.data[index].player_id
+            )
+            this.playersHome.push({
+              played: true,
+              name: gameEvent.data[index].player_name,
+              position:
+                indexPlayerDataHome != -1
+                  ? this.positions[gameEvent.home_team.players[indexPlayerDataHome].position_id - 1]
+                      .name
+                  : '',
+              position_id: gameEvent.home_team.players[indexPlayerDataHome].position_id,
+              imgPlayer:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                gameEvent.data[index].player_id +
+                '.png',
+              nationality:
+                indexPlayerDataHome != -1
+                  ? gameEvent.home_team.players[indexPlayerDataHome].nationality
+                    ? gameEvent.home_team.players[indexPlayerDataHome].nationality.substring(0, 3)
+                    : ''
+                  : '',
+              imgNationality:
+                indexPlayerDataHome != -1
+                  ? gameEvent.home_team.players[indexPlayerDataHome].nationality_photo
+                  : '',
+              substitutionIn: false,
+              substitutionOut: false,
+              abrevNamePlayer: abrevNamePlayerHome,
+              imgTeam: 'https://golstatsimages.blob.core.windows.net/teams-80/' + gameEvent.team_id + '.png',
+              substitutionMin: '',
+              substitutionDataID: '',
+              shirt_number: gameEvent.data[index].jersey_number,
+              positionX: gameEvent.data[index].y - 13,
+              positionY: positionConvertHome * 0.9,
+              positionXOrigin: gameEvent.data[index].y - 17,
+              positionYOrigin: gameEvent.data[index].x - 2,
+              playerId: gameEvent.data[index].player_id,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0,
+              isbench: false,
+              id_team: gameEvent.team_id
+            })
+            this.homeTeamLogo =
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + gameEvent.team_id + '.png'
+          }
+
+          this.playersHome.sort((a, b) =>
+            a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+          )
+        }
+      } else {
+        if (this.playersAway.length == 0) {
+          this.dataPlayersAway = gameEvent.away_team.players
+          for (let index = 0; index < gameEvent.data.length; index++) {
+            this.away_team_id = gameEvent.team_id
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' + gameEvent.team_id + '.svg',
+              'away',
+              1
+            )
+            this.imageExists(
+              'https://golstatsimages.blob.core.windows.net/jersey-teams/' + gameEvent.team_id + '_g.svg',
+              'away',
+              0
+            )
+            var NameArrayAway = gameEvent.data[index].player_name.split(',')
+            var lastArrayNameAway = NameArrayAway[0].split(' ')
+            var ArrayNameAway = NameArrayAway[1].trim().split(' ')
+            var lastNameAway = ''
+            if (lastArrayNameAway.length == 2 || lastArrayNameAway.length == 1) {
+              if (lastArrayNameAway[0].length < 4) {
+                lastNameAway = lastArrayNameAway[0] + ' ' + lastArrayNameAway[1]
+              } else {
+                lastNameAway = lastArrayNameAway[0]
+              }
+            } else {
+              if (lastArrayNameAway.length == 3) {
+                lastNameAway = lastArrayNameAway[0] + ' ' + lastArrayNameAway[1]
+              } else {
+                if (lastArrayNameAway.length == 4) {
+                  lastNameAway =
+                    lastArrayNameAway[1] + ' ' + lastArrayNameAway[2] + ' ' + lastArrayNameAway[3]
+                }
+              }
+            }
+            var nameAway =
+              ArrayNameAway[ArrayNameAway.length - 1] != ''
+                ? ArrayNameAway[ArrayNameAway.length - 1].charAt(0)
+                : ArrayNameAway[ArrayNameAway.length - 2]
+                  ? ArrayNameAway[ArrayNameAway.length - 2].charAt(0)
+                  : ''
+            lastNameAway = lastNameAway.replace(',', '')
+            var abrevNamePlayerAway = nameAway + '. ' + lastNameAway
+
+            var newCooAway = gameEvent.data[index].x
+
+            var positionConvertAway = 100 - ((100 - newCooAway) * 50) / 100
+            positionConvertAway = positionConvertAway * 0.9
+            var indexPlayerDataAway = gameEvent.away_team.players.findIndex(
+              (player) => player.player_id == gameEvent.data[index].player_id
+            )
+            this.playersAway.push({
+              played: true,
+              name: gameEvent.data[index].player_name,
+              position:
+                indexPlayerDataAway != -1
+                  ? this.positions[gameEvent.away_team.players[indexPlayerDataAway].position_id - 1]
+                      .name
+                  : '',
+              position_id: gameEvent.away_team.players[indexPlayerDataAway].position_id,
+              imgPlayer:
+                'https://golstatsimages.blob.core.windows.net/players-profile/' +
+                gameEvent.data[index].player_id +
+                '.png',
+              nationality:
+                indexPlayerDataAway != -1
+                  ? gameEvent.away_team.players[indexPlayerDataAway].nationality
+                    ? gameEvent.away_team.players[indexPlayerDataAway].nationality.substring(0, 3)
+                    : ''
+                  : '',
+              imgNationality:
+                indexPlayerDataAway != -1
+                  ? gameEvent.away_team.players[indexPlayerDataAway].nationality_photo
+                  : '',
+              substitutionIn: false,
+              substitutionOut: false,
+              abrevNamePlayer: abrevNamePlayerAway,
+              imgTeam: 'https://golstatsimages.blob.core.windows.net/teams-80/' + gameEvent.team_id + '.png',
+              substitutionMin: '',
+              substitutionDataID: '',
+              shirt_number: gameEvent.data[index].jersey_number,
+              positionX: gameEvent.data[index].y - 13,
+              positionY: positionConvertAway + 2,
+              positionXOrigin: gameEvent.data[index].y - 17,
+              positionYOrigin: gameEvent.data[index].x - 7,
+              playerId: gameEvent.data[index].player_id,
+              goals: 0,
+              yellowcards: 0,
+              redcards: 0,
+              goalsMin: [],
+              yellowcardsMin: 0,
+              redcardsMin: 0,
+              idyellowcards: 0,
+              idredcards: 0,
+              idsGoals: [],
+              idSubstitution: 0,
+              isbench: false,
+              id_team: gameEvent.team_id
+            })
+            this.awayTeamLogo =
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + gameEvent.team_id + '.png'
+          }
+          this.playersAway.sort((a, b) =>
+            a.position_id > b.position_id ? 1 : b.position_id > a.position_id ? -1 : 0
+          )
+        }
+      }
+    },
+    update_mxm([channelName, updateGameEvent]) {
+      var indexGoalF = -1
+      var indexGoalP = -1
+      if (this.players.length > 0) {
+        var playIndexHomeRedCard = this.players.findIndex(
+          (player) => player.idredcards == updateGameEvent.play_id
+        )
+        var playIndexHomeYellowCard = this.players.findIndex(
+          (player) => player.idyellowcards == updateGameEvent.play_id
+        )
+        var playIndexHomeSubstitution = this.players.findIndex(
+          (player) => player.idSubstitution == updateGameEvent.play_id
+        )
+        for (let indexH = 0; indexH < this.players.length; indexH++) {
+          var playIndexHomeGoals = this.players[indexH].idsGoals.findIndex(
+            (goalMin) => goalMin == updateGameEvent.play_id
+          )
+          if (playIndexHomeGoals != -1) {
+            indexGoalF = playIndexHomeGoals
+            indexGoalP = indexH
+          }
+        }
+        if (playIndexHomeRedCard != -1) {
+          this.resetPlayUpdate('RedCard', 'Home', playIndexHomeRedCard, indexGoalP)
+        }
+        if (playIndexHomeYellowCard != -1) {
+          this.resetPlayUpdate('YellowCard', 'Home', playIndexHomeYellowCard, indexGoalP)
+        }
+        if (playIndexHomeSubstitution != -1) {
+          this.resetPlayUpdate('Substitution', 'Home', playIndexHomeSubstitution, indexGoalP)
+        }
+        if (indexGoalF != -1) {
+          this.resetPlayUpdate('Goals', 'Home', indexGoalF, indexGoalP)
+        }
+      }
+      if (this.players.length > 0) {
+        var playIndexHAwayRedCard = this.players.findIndex(
+          (player) => player.idredcards == updateGameEvent.play_id
+        )
+        var playIndexAwayYellowCard = this.players.findIndex(
+          (player) => player.idyellowcards == updateGameEvent.play_id
+        )
+        var playIndexAwaySubstitution = this.players.findIndex(
+          (player) => player.idSubstitution == updateGameEvent.play_id
+        )
+        for (let indexA = 0; indexA < this.players.length; indexA++) {
+          var playIndexAwayGoals = this.players[indexA].idsGoals.findIndex(
+            (goalMin) => goalMin == updateGameEvent.play_id
+          )
+          if (playIndexAwayGoals != -1) {
+            indexGoalF = playIndexAwayGoals
+            indexGoalP = indexA
+          }
+        }
+        if (playIndexHAwayRedCard != -1) {
+          this.resetPlayUpdate('RedCard', 'Away', playIndexHAwayRedCard, indexGoalP)
+        }
+        if (playIndexAwayYellowCard != -1) {
+          this.resetPlayUpdate('YellowCard', 'Away', playIndexAwayYellowCard, indexGoalP)
+        }
+        if (playIndexAwaySubstitution != -1) {
+          this.resetPlayUpdate('Substitution', 'Away', playIndexAwaySubstitution, indexGoalP)
+        }
+        if (indexGoalF != -1) {
+          this.resetPlayUpdate('Goals', 'Away', indexGoalF, indexGoalP)
+        }
+      }
+      if (updateGameEvent.event_type_id == 3) {
+        if (updateGameEvent.team_id == this.home_team_id) {
+          if (this.players.length > 0) {
+            var idsPlayers = updateGameEvent.player_id.split('@')
+            var indexChangeHomeOut = this.players.findIndex(
+              (player) => player.playerId == idsPlayers[0]
+            )
+            var indexChangeHomeIn = this.players.findIndex(
+              (player) => player.playerId == idsPlayers[1]
+            )
+            if (indexChangeHomeOut != -1) {
+              this.players[indexChangeHomeOut].idSubstitution = updateGameEvent.play_id
+              this.players[indexChangeHomeOut].substitutionOut = true
+              this.players[indexChangeHomeOut].substitutionMin = updateGameEvent.minute
+              this.players[indexChangeHomeOut].substitutionDataID =
+                updateGameEvent.team_id + '@' + updateGameEvent.player_id
+            }
+            if (indexChangeHomeIn != -1) {
+              this.players[indexChangeHomeIn].idSubstitution = updateGameEvent.play_id
+              this.players[indexChangeHomeIn].substitutionIn = true
+              this.players[indexChangeHomeIn].substitutionMin = updateGameEvent.minute
+              this.players[indexChangeHomeIn].substitutionDataID =
+                updateGameEvent.team_id + '@' + updateGameEvent.player_id
+            }
+          }
+        } else {
+          if (this.players.length > 0) {
+            var idsPlayersAway = updateGameEvent.player_id.split('@')
+            var indexChangeAwayOut = this.players.findIndex(
+              (player) => player.playerId == idsPlayersAway[0]
+            )
+            var indexChangeAwayIn = this.players.findIndex(
+              (player) => player.playerId == idsPlayersAway[1]
+            )
+            if (indexChangeHomeOut != -1) {
+              this.players[indexChangeAwayOut].idSubstitution = updateGameEvent.play_id
+              this.players[indexChangeAwayOut].substitutionOut = true
+              this.players[indexChangeAwayOut].substitutionMin = updateGameEvent.minute
+              this.players[indexChangeAwayOut].substitutionDataID =
+                updateGameEvent.team_id + '@' + updateGameEvent.player_id
+            }
+            if (indexChangeAwayIn != -1) {
+              this.players[indexChangeAwayIn].idSubstitution = updateGameEvent.play_id
+              this.players[indexChangeAwayIn].substitutionIn = true
+              this.players[indexChangeAwayIn].substitutionMin = updateGameEvent.minute
+              this.players[indexChangeAwayIn].substitutionDataID =
+                updateGameEvent.team_id + '@' + updateGameEvent.player_id
+            }
+          }
+        }
+      }
+      if (updateGameEvent.event_type_id == 1) {
+        if (updateGameEvent.team_id == this.home_team_id) {
+          if (this.playersHome.length > 0) {
+            var indexPlayerGoalHome = this.playersHome.findIndex(
+              (player) => player.playerId == updateGameEvent.player_id
+            )
+            if (indexPlayerGoalHome != -1) {
+              this.playersHome[indexPlayerGoalHome].goals += 1
+              this.playersHome[indexPlayerGoalHome].goalsMin.push(updateGameEvent.minute)
+              this.playersHome[indexPlayerGoalHome].idsGoals.push(updateGameEvent.play_id)
+            }
+          }
+        } else {
+          if (this.players.length > 0) {
+            var indexPlayerGoalAway = this.players.findIndex(
+              (player) => player.playerId == updateGameEvent.player_id
+            )
+            if (indexPlayerGoalAway != -1) {
+              this.players[indexPlayerGoalAway].goals += 1
+              this.players[indexPlayerGoalAway].goalsMin.push(updateGameEvent.minute)
+              this.players[indexPlayerGoalAway].idsGoals.push(updateGameEvent.play_id)
+            }
+          }
+        }
+      }
+      if (updateGameEvent.event_type_id == 2) {
+        if (updateGameEvent.category_id == 8) {
+          if (updateGameEvent.team_id == this.home_team_id) {
+            if (this.playersHome.length > 0) {
+              var indexPlayerYellowHome = this.playersHome.findIndex(
+                (player) => player.playerId == updateGameEvent.player_id
+              )
+              if (indexPlayerYellowHome != -1) {
+                this.playersHome[indexPlayerYellowHome].yellowcards += 1
+                this.playersHome[indexPlayerYellowHome].yellowcardsMin = updateGameEvent.minute
+                this.playersHome[indexPlayerYellowHome].idyellowcards = updateGameEvent.play_id
+              }
+            }
+          } else {
+            if (this.players.length > 0) {
+              var indexPlayerYellowAway = this.players.findIndex(
+                (player) => player.playerId == updateGameEvent.player_id
+              )
+              if (indexPlayerYellowAway != -1) {
+                this.players[indexPlayerYellowAway].yellowcards += 1
+                this.players[indexPlayerYellowAway].yellowcardsMin = updateGameEvent.minute
+                this.players[indexPlayerYellowAway].idyellowcards = updateGameEvent.play_id
+              }
+            }
+          }
+        }
+        if (updateGameEvent.category_id == 9) {
+          if (updateGameEvent.team_id == this.home_team_id) {
+            if (this.playersHome.length > 0) {
+              var indexPlayerRedHome = this.playersHome.findIndex(
+                (player) => player.playerId == updateGameEvent.player_id
+              )
+              if (indexPlayerRedHome != -1) {
+                this.playersHome[indexPlayerRedHome].redcards += 1
+                this.playersHome[indexPlayerRedHome].redcardsMin = updateGameEvent.minute
+                this.playersHome[indexPlayerRedHome].idredcards = updateGameEvent.play_id
+              }
+            }
+          } else {
+            if (this.players.length > 0) {
+              var indexPlayerRedAway = this.players.findIndex(
+                (player) => player.playerId == updateGameEvent.player_id
+              )
+              if (indexPlayerRedAway != -1) {
+                this.players[indexPlayerRedAway].redcards += 1
+                this.players[indexPlayerRedAway].redcardsMin = updateGameEvent.minute
+                this.players[indexPlayerRedAway].idredcards = updateGameEvent.play_id
+              }
+            }
+          }
+        }
+      }
+    },
+    delete_mxm([channelName, deleteGameEvent]) {
+      if (this.players.length > 0) {
+        for (let index = 0; index < this.players.length; index++) {
+          if (this.players[index].idSubstitution == deleteGameEvent.play_id) {
+            this.players[index].substitutionOut = false
+            this.players[index].substitutionIn = false
+            this.players[index].substitutionMin = ''
+            this.players[index].substitutionDataID = ''
+            this.players[index].idSubstitution = 0
+          }
+        }
+      }
+      if (this.players.length > 0) {
+        for (let indexAS = 0; indexAS < this.players.length; indexAS++) {
+          if (this.players[indexAS].idSubstitution == deleteGameEvent.play_id) {
+            this.players[indexAS].substitutionOut = false
+            this.players[indexAS].substitutionIn = false
+            this.players[indexAS].substitutionMin = ''
+            this.players[indexAS].substitutionDataID = ''
+            this.players[indexAS].idSubstitution = 0
+          }
+        }
+      }
+      if (this.players.length > 0) {
+        for (let indexGH = 0; indexGH < this.players.length; indexGH++) {
+          const indexGoal = this.players[indexGH].idsGoals.findIndex(
+            (goalMin) => goalMin == deleteGameEvent.play_id
+          )
+          if (indexGoal != -1) {
+            this.players[indexGH].goals = this.players[indexGH].goals - 1
+            this.players[indexGH].goalsMin.splice(indexGoal, 1)
+            this.players[indexGH].idsGoals.splice(indexGoal, 1)
+          }
+        }
+      }
+      if (this.players.length > 0) {
+        for (let indexGA = 0; indexGA < this.players.length; indexGA++) {
+          const indexGoal = this.players[indexGA].idsGoals.findIndex(
+            (goalMin) => goalMin == deleteGameEvent.play_id
+          )
+          if (indexGoal != -1) {
+            this.players[indexGA].goals = this.players[indexGA].goals - 1
+            this.players[indexGA].goalsMin.splice(indexGoal, 1)
+            this.players[indexGA].idsGoals.splice(indexGoal, 1)
+          }
+        }
+      }
+      if (this.players.length > 0) {
+        for (let indexAH = 0; indexAH < this.players.length; indexAH++) {
+          if (this.players[indexAH].idyellowcards == deleteGameEvent.play_id) {
+            this.players[indexAH].yellowcards = 0
+            this.players[indexAH].yellowcardsMin = 0
+            this.players[indexAH].idyellowcards = 0
+          }
+        }
+      }
+      if (this.players.length > 0) {
+        for (let indexAA = 0; indexAA < this.players.length; indexAA++) {
+          if (this.players[indexAA].idyellowcards == deleteGameEvent.play_id) {
+            this.players[indexAA].yellowcards = 0
+            this.players[indexAA].yellowcardsMin = 0
+            this.players[indexAA].idyellowcards = 0
+          }
+        }
+      }
+      if (this.players.length > 0) {
+        for (let indexRH = 0; indexRH < this.players.length; indexRH++) {
+          if (this.players[indexRH].idredcards == deleteGameEvent.play_id) {
+            this.players[indexRH].redcards = 0
+            this.players[indexRH].redcardsMin = 0
+            this.players[indexRH].idredcards = 0
+          }
+        }
+      }
+      if (this.players.length > 0) {
+        for (let indexRA = 0; indexRA < this.players.length; indexRA++) {
+          if (this.players[indexRA].idredcards == deleteGameEvent.play_id) {
+            this.players[indexRA].redcards = 0
+            this.players[indexRA].redcardsMin = 0
+            this.players[indexRA].idredcards = 0
+          }
+        }
+      }
+    },
+    new_mxm([channelName, gameEvent]) {
+      if (gameEvent.event_type_id == 3) {
+        if (gameEvent.team_id == this.home_team_id) {
+          if (this.players.length > 0) {
+            var idsPlayers = gameEvent.player_id.split('@')
+            var indexChangeHomeOut = this.players.findIndex(
+              (player) => player.playerId == idsPlayers[0]
+            )
+            var indexChangeHomeIn = this.players.findIndex(
+              (player) => player.playerId == idsPlayers[1]
+            )
+            if (indexChangeHomeOut != -1) {
+              this.players[indexChangeHomeOut].idSubstitution = gameEvent.play_id
+              this.players[indexChangeHomeOut].substitutionOut = true
+              this.players[indexChangeHomeOut].substitutionMin = gameEvent.minute
+              this.players[indexChangeHomeOut].substitutionDataID =
+                gameEvent.team_id + '@' + gameEvent.player_id
+            }
+            if (indexChangeHomeIn != -1) {
+              this.players[indexChangeHomeIn].idSubstitution = gameEvent.play_id
+              this.players[indexChangeHomeIn].substitutionIn = true
+              this.players[indexChangeHomeIn].substitutionMin = gameEvent.minute
+              this.players[indexChangeHomeIn].substitutionDataID =
+                gameEvent.team_id + '@' + gameEvent.player_id
+            }
+          }
+        } else {
+          if (this.players.length > 0) {
+            var idsPlayersAway = gameEvent.player_id.split('@')
+            var indexChangeAwayOut = this.players.findIndex(
+              (player) => player.playerId == idsPlayersAway[0]
+            )
+            var indexChangeAwayIn = this.players.findIndex(
+              (player) => player.playerId == idsPlayersAway[1]
+            )
+            if (indexChangeHomeOut != -1) {
+              this.players[indexChangeAwayOut].idSubstitution = gameEvent.play_id
+              this.players[indexChangeAwayOut].substitutionOut = true
+              this.players[indexChangeAwayOut].substitutionMin = gameEvent.minute
+              this.players[indexChangeAwayOut].substitutionDataID =
+                gameEvent.team_id + '@' + gameEvent.player_id
+            }
+            if (indexChangeAwayIn != -1) {
+              this.players[indexChangeAwayIn].idSubstitution = gameEvent.play_id
+              this.players[indexChangeAwayIn].substitutionIn = true
+              this.players[indexChangeAwayIn].substitutionMin = gameEvent.minute
+              this.players[indexChangeAwayIn].substitutionDataID =
+                gameEvent.team_id + '@' + gameEvent.player_id
+            }
+          }
+        }
+      }
+      if (gameEvent.event_type_id == 1) {
+        if (gameEvent.team_id == this.home_team_id) {
+          if (this.players.length > 0) {
+            var indexPlayerGoalHome = this.players.findIndex(
+              (player) => player.playerId == gameEvent.player_id
+            )
+            if (indexPlayerGoalHome != -1) {
+              this.players[indexPlayerGoalHome].goals += 1
+              this.players[indexPlayerGoalHome].goalsMin.push(gameEvent.minute)
+              this.players[indexPlayerGoalHome].idsGoals.push(gameEvent.play_id)
+            }
+          }
+        } else {
+          if (this.players.length > 0) {
+            var indexPlayerGoalAway = this.players.findIndex(
+              (player) => player.playerId == gameEvent.player_id
+            )
+            if (indexPlayerGoalAway != -1) {
+              this.players[indexPlayerGoalAway].goals += 1
+              this.players[indexPlayerGoalAway].goalsMin.push(gameEvent.minute)
+              this.players[indexPlayerGoalAway].idsGoals.push(gameEvent.play_id)
+            }
+          }
+        }
+      }
+      if (gameEvent.event_type_id == 2) {
+        if (gameEvent.category_id == 8) {
+          if (gameEvent.team_id == this.home_team_id) {
+            if (this.players.length > 0) {
+              var indexPlayerYellowHome = this.players.findIndex(
+                (player) => player.playerId == gameEvent.player_id
+              )
+              if (indexPlayerYellowHome != -1) {
+                this.players[indexPlayerYellowHome].yellowcards += 1
+                this.players[indexPlayerYellowHome].yellowcardsMin = gameEvent.minute
+                this.players[indexPlayerYellowHome].idyellowcards = gameEvent.play_id
+              }
+            }
+          } else {
+            if (this.players.length > 0) {
+              var indexPlayerYellowAway = this.players.findIndex(
+                (player) => player.playerId == gameEvent.player_id
+              )
+              if (indexPlayerYellowAway != -1) {
+                this.players[indexPlayerYellowAway].yellowcards += 1
+                this.players[indexPlayerYellowAway].yellowcardsMin = gameEvent.minute
+                this.players[indexPlayerYellowAway].idyellowcards = gameEvent.play_id
+              }
+            }
+          }
+        }
+        if (gameEvent.category_id == 9) {
+          if (gameEvent.team_id == this.home_team_id) {
+            if (this.players.length > 0) {
+              var indexPlayerRedHome = this.players.findIndex(
+                (player) => player.playerId == gameEvent.player_id
+              )
+              if (indexPlayerRedHome != -1) {
+                this.players[indexPlayerRedHome].redcards += 1
+                this.players[indexPlayerRedHome].redcardsMin = gameEvent.minute
+                this.players[indexPlayerRedHome].idredcards = gameEvent.play_id
+              }
+            }
+          } else {
+            if (this.players.length > 0) {
+              var indexPlayerRedAway = this.players.findIndex(
+                (player) => player.playerId == gameEvent.player_id
+              )
+              if (indexPlayerRedAway != -1) {
+                this.players[indexPlayerRedAway].redcards += 1
+                this.players[indexPlayerRedAway].redcardsMin = gameEvent.minute
+                this.players[indexPlayerRedAway].idredcards = gameEvent.play_id
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.containernofoundsearchrecientes {
+  width: 100%;
+  height: 38px;
+  display: inline-block;
+  margin: 0 auto;
+}
+.text-containernofoundsearchrecientes {
+  font-size: 13px;
+  text-align: center;
+  color: rgb(176, 176, 176);
+  line-height: 16px;
+}
+.btn-delete-filters {
+  width: 70%;
+  height: 26px;
+  border-radius: 16px;
+  font-size: 14px;
+  text-align: center;
+  background: rgba($color: #ffffff, $alpha: 0.2);
+  color: white;
+  margin: 0 auto;
+  line-height: 26px;
+  margin-top: 5px;
+}
+.btn-delete-filters:hover {
+  cursor: pointer;
+  background: rgba($color: #ffffff, $alpha: 0.5);
+}
+.selectoritem {
+  width: 300px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  font-family: 'Poppins-Regular';
+  font-size: 14px;
+}
+
+.postmatch__matchday {
+  width: 100%;
+  text-align: center;
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: -0.14px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+  padding: 0;
+  margin: 0;
+}
+.lineup {
+  width: 100%;
+  font-family: Poppins, sans-serif;
+
+  &.break-point-3 &__card {
+    padding: 23px 11px;
+  }
+
+  &.break-point-3 &__card-body {
+    margin: 0 auto 20px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 11px;
+    gap: 10px;
+    flex-wrap: wrap;
+    @media only screen and (max-width: 500px) {
+      justify-content: center;
+      gap: 3px;
+    }
+
+    h2 {
+      margin: 0;
+      color: #fff;
+      font-family: Poppins, sans-serif;
+      font-size: 18px;
+      font-weight: 500;
+      @media only screen and (max-width: 500px) {
+        width: 100%;
+      }
+    }
+  }
+
+  &__card {
+    padding: 17px 32px 24px;
+    border-radius: 12px;
+    background-color: #1d2a35;
+    filter: drop-shadow(0px 3.860927104949951px 19.304636001586914px rgba(0, 0, 0, 0.25));
+    @media screen and (max-width: 500px) {
+      padding: 17px 12px 24px;
+    }
+
+    h3 {
+      color: rgba(255, 255, 255, 0.7);
+      text-align: center;
+      font-family: Poppins, sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: normal;
+      margin: 0 auto 8px;
+      max-width: 300px;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+  }
+
+  &__filters {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+
+    &__selector {
+      margin: auto;
+      max-width: 183px;
+      @media screen and (max-width: 500px) {
+        max-width: 99px;
+      }
+    }
+  }
+
+  &__card-body {
+    margin: 0 auto 20px;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    &.space-between {
+      justify-content: space-between;
+    }
+
+    &__probables {
+      display: flex;
+      justify-content: space-between;
+      font-size: 10px;
+      gap: 8px;
+      align-items: center;
+    }
+
+    &__img-probables {
+      width: 18px;
+      height: 18px;
+      visibility: hidden;
+      width: 0;
+      @media screen and (max-width: 500px) {
+        visibility: visible;
+        width: auto;
+      }
+    }
+
+    &__team-vs {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 12px;
+      visibility: hidden;
+      width: 0;
+      @media screen and (max-width: 500px) {
+        visibility: visible;
+        width: auto;
+      }
+    }
+  }
+
+  &__items-carousel {
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    margin-top: 20px;
+  }
+
+  &__items-center {
+  }
+
+  &__text-btn {
+    outline: none;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    font-family: Poppins, sans-serif;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 100%;
+    /* 14.4px */
+    letter-spacing: 0px;
+    text-decoration-line: underline;
+    cursor: pointer;
+    border: none;
+    justify-self: flex-end;
+    @media only screen and (max-width: 500px) {
+      font-size: 11px;
+    }
+    &:hover {
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  &__text-btn-recientes {
+    outline: none;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    font-family: Poppins, sans-serif;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 100%;
+    right: 0px;
+    /* 14.4px */
+    letter-spacing: 0px;
+    text-decoration-line: underline;
+    cursor: pointer;
+    border: none;
+    justify-self: flex-end;
+    @media only screen and (max-width: 500px) {
+      font-size: 11px;
+      margin-top: -20px;
+    }
+    @media only screen and (max-width: 380px) {
+      font-size: 10px;
+      margin-top: -40px;
+    }
+    &:hover {
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  &__text-btn-abs {
+    outline: none;
+    position: absolute;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    font-family: Poppins, sans-serif;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 100%;
+    right: 0px;
+    /* 14.4px */
+    letter-spacing: 0px;
+    text-decoration-line: underline;
+    cursor: pointer;
+    border: none;
+    justify-self: flex-end;
+    @media only screen and (max-width: 500px) {
+      font-size: 11px;
+    }
+    &:hover {
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+
+  &__selector-recientes {
+    min-width: 310px;
+    max-width: 310px;
+    width: 100%;
+
+    &-item {
+      width: 100%;
+      color: rgba(255, 255, 255, 0.7);
+      text-align: center;
+      font-family: Poppins, sans-serif;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 143.322%;
+      letter-spacing: -0.14px;
+    }
+  }
+  &__selector {
+    max-width: 390px;
+    margin: auto;
+    @media screen and (max-width: 530px) {
+      max-width: 300px;
+      margin-top: 10px !important;
+    }
+
+    &-item {
+      width: 100%;
+      color: rgba(255, 255, 255, 0.7);
+      text-align: center;
+      font-family: Poppins, sans-serif;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 143.322%;
+      letter-spacing: -0.14px;
+      @media screen and (max-width: 530px) {
+        font-size: 11px;
+      }
+    }
+  }
+
+  &__field {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>