Untitled

<!-- Recommended Result Section -->
        <v-container v-if="isGotRecommendedProducts">
          <v-card
            :elevation="$vuetify?.breakpoint?.smAndDown ? 0 : 3"
            :style="{
              margin: $vuetify?.breakpoint?.smAndDown ? '0' : '0 10rem',
            }"
          >
            <v-row class="d-flex justify-center">
              <v-col cols="12" sm="10" md="10" lg="10">
                <div
                  :class="[
                    $vuetify.breakpoint.xs ? 'text-body-2' : 'text-subtitle-1',
                  ]"
                >
                  <div class="sake-brewery-small-logo__container mx-auto mb-8">
                    <v-img
                      :src="SakeBreweryTopLogo"
                      alt="sake brewery name(i.e., sakagura)"
                      contain
                    >
                    </v-img>
                  </div>
                  <h2
                    class="mb-6 mt-4 font-weight-bold text-center green-heading-text"
                  >
                    あなたのタイプ
                  </h2>
                  <div>
                    <div>
                      <p class="random-comment">
                        {{ `${tasteProfileDetails.comment}` }}
                      </p>
                    </div>
                    <div class="pattern-type">
                      <div>
                        <p>{{ tasteProfileDetails.name }}</p>
                      </div>

                      <v-img
                        :src="getImagePath(tasteProfileDetails.name)"
                        :alt="getImagePath(tasteProfileDetails.name)"
                        height="20rem"
                        contain
                      ></v-img>
                    </div>
                  </div>

                  <div class="mb-2 text-center">
                    <h2
                      class="green-heading-text mb-6 mt-2 mt-md-4 font-weight-bold"
                    >
                      タイプの特徴
                    </h2>
                    <v-row justify="center">
                      <v-col
                        cols="auto"
                        class="d-flex flex-column align-center"
                      >
                        <ul class="taste-characteristics">
                          <li
                            v-for="(
                              item, index
                            ) in tasteProfileDetails.characteristics"
                            :key="index"
                            class="text-center mb-4"
                          >
                            ＊ {{ item }}
                          </li>
                        </ul>
                      </v-col>
                    </v-row>
                  </div>
                  <div>
                    <p
                      class="mt-3 mt-md-4 pa-4 profile-explanation"
                      style="background-color: #dfedc9"
                    >
                      {{ tasteProfileDetails.explanation }}
                    </p>
                    <v-divider></v-divider>
                    <template>
                      <v-container>
                        <v-row class="d-flex justify-end">
                          <v-dialog
                            v-model="showFeedbackTextArea"
                            max-width="600px"
                          >
                            <v-card>
                              <v-card-title>
                                <span>
                                  <v-icon v-if="thumbsUp"
                                    >mdi-thumb-up-outline</v-icon
                                  >
                                  <v-icon v-else>mdi-thumb-down-outline</v-icon>
                                </span>
                                フィードバック
                                <v-spacer></v-spacer>
                                <!-- <v-menu bottom left>
                              <template v-slot:activator="{ on, attrs }">
                                <v-btn icon v-bind="attrs" v-on="on">
                                  <v-icon>mdi-dots-vertical</v-icon>
                                </v-btn>
                              </template>
                            </v-menu> -->
                              </v-card-title>
                              <v-card-text class="pb-0">
                                <v-textarea
                                  v-model="feedbackText"
                                  name="positive feedback"
                                  outlined
                                  auto-grow
                                  :placeholder="
                                    thumbsUp
                                      ? 'ご意見やご要望がございましたら、お気軽にお知らせください。'
                                      : 'ご意見やご要望がございましたら、お気軽にお知らせください。'
                                  "
                                ></v-textarea>
                              </v-card-text>
                              <v-card-actions class="py-4">
                                <v-spacer></v-spacer>
                                <v-btn
                                  color="#006934"
                                  @click="proceedWithFeedbackText"
                                  dark
                                >
                                  送信
                                </v-btn>
                              </v-card-actions>
                            </v-card>
                          </v-dialog>
                          <v-btn
                            color="#006934"
                            class="ma-2"
                            dark
                            icon
                            @click="handleThumbsUp"
                          >
                            <v-icon>{{
                              thumbsUp ? "mdi-thumb-up" : "mdi-thumb-up-outline"
                            }}</v-icon>
                          </v-btn>
                          <v-btn
                            color="#006934"
                            class="ma-2"
                            dark
                            icon
                            @click="handleThumbsDown"
                          >
                            <v-icon>{{
                              thumbsDown
                                ? "mdi-thumb-down"
                                : "mdi-thumb-down-outline"
                            }}</v-icon>
                          </v-btn>
                        </v-row>
                      </v-container>
                    </template>
                  </div>
                  <div class="d-flex flex-column align-center justify-center">
                    <v-chip-group
                      v-for="(values, type) in testProfileTypes"
                      :key="type"
                      class="me-1 me-sm-2 text-center"
                      column
                      multiple
                    >
                      <div class="text-center">
                        <!-- Taste Category Types Heading -->
                        <h2
                          v-if="
                            type == 'tasteCategoryTypes' && values.length > 0
                          "
                          :class="[$vuetify.breakpoint.xs ? 'mb-2' : 'mb-0']"
                          class="green-heading-text mb-2 font-weight-bold text-center"
                        >
                          おすすめの日本酒の味
                        </h2>
                        <!-- Manufacturing Category Types Heading -->
                        <h2
                          v-if="
                            type == 'manufacturingCategoryTypes' &&
                            values.length > 0
                          "
                          :class="[$vuetify.breakpoint.xs ? 'mb-2' : 'mb-0']"
                          class="green-heading-text mb-2 font-weight-bold text-center"
                        >
                          おすすめの日本酒の種類
                        </h2>
                        <!-- Chips -->
                        <div
                          :class="[
                            'mb-6 d-flex flex-wrap justify-center align-center font-weight-bold',
                            $vuetify?.breakpoint?.smAndDown
                              ? 'flex-column'
                              : '',
                          ]"
                        >
                          <v-chip
                            v-for="value in values"
                            :key="value"
                            outlined
                            small
                            :class="[$vuetify.breakpoint.xs ? 'small' : '']"
                            class="ma-1 px-4 py-2"
                            style="font-size: 17px"
                          >
                            {{ value }}
                          </v-chip>
                        </div>
                      </div>
                    </v-chip-group>
                  </div>
                </div>
              </v-col>
            </v-row>

            <div
              v-for="(allProducts, category) in recommendedProducts"
              :key="category"
            >
              <h2 class="mb-6 my-4 text-center green-heading-text">
                菊水のおすすめ
              </h2>
              <v-row class="d-flex justify-center mx-1">
                <v-col
                  v-for="product in allProducts"
                  :key="product?.item_id"
                  cols="12"
                  sm="10"
                  md="11"
                  lg="11"
                >
                  <ProductCard
                    :id="product?.item_id"
                    :name="product?.title"
                    :item_image="product?.image_url"
                    :price="product?.price"
                    :description="product?.description"
                    :tasteType="[product?.flavour_type.join('・')]"
                    :ingredientType="[product?.variant.join('・')]"
                    :volume="product?.volume"
                    :volumeVariant="product?.volume_variant"
                    :childItems="allChildItems?.[product?.item_id]"
                    :recommendedWayToDrink="product?.recommended_way_to_consume"
                    :recommendedJapaneseFood="product?.japanese_food"
                    :recommendedWesternFood="product?.western_food"
                    :recommendedChineseAndEthnicFood="
                      product?.chinese_and_ethnic_food
                    "
                    :recommendedSweetsAndFruit="product?.sweets_and_fruit"
                  />
                </v-col>
              </v-row>
            </div>
            <div>
              <v-row class="d-flex justify-center align-center my-8" dense>
                <v-btn
                  class="mx-2"
                  :small="$vuetify.breakpoint.smAndDown"
                  color="#355b91"
                  dark
                  @click="shareOnFacebook"
                >
                  <v-icon left>mdi-facebook</v-icon>
                  シェア
                </v-btn>

                <v-btn
                  class="mx-2"
                  :small="$vuetify.breakpoint.smAndDown"
                  color="#398bb1"
                  dark
                  @click="shareOnTwitter"
                >
                  <v-icon left>mdi-twitter</v-icon>
                  ツイート
                </v-btn>

                <v-btn
                  :small="$vuetify.breakpoint.smAndDown"
                  class="mx-2"
                  color="#309c43"
                  dark
                  @click="shareOnLine"
                >
                  <v-icon left>mdi-chat-outline</v-icon>
                  LINEで送る
                </v-btn>
              </v-row>
            </div>
            <div>
              <v-row class="d-flex justify-center align-center">
                <v-col cols="12" md="10" lg="10">
                  <v-btn
                    class="mt-12 mb-10 py-6 font-weight-medium"
                    @click="resetSurvey"
                    rounded
                    dark
                    block
                    color="#006934"
                    :small="$vuetify?.breakpoint?.smAndDown"
                    :style="{
                      fontSize: $vuetify?.breakpoint?.smAndDown
                        ? '18px'
                        : '23px',
                    }"
                  >
                    <b>もう一度診断する</b>
                  </v-btn>
                </v-col>
              </v-row>
            </div>
          </v-card>
          <v-footer class="footer-section" app fixed>
            <div style="width: 100%; background-color: #b6afab">
              <p class="text-center py-4 ma-0">
                Produced by Taste & Aroma Strategic Research Institute Co.,Ltd.
              </p>
            </div>
          </v-footer>
        </v-container>