@extends('layouts.app')
  @section('content')
  <!-- main-banner -->
<section class="main-banner">
    <div class="container">
        <div class="row">
        <div class="col-md-7 banner-heading" data-aos="fade-right">
            <h5 class="baner-hdgh5">Lets Get</h5>
            <h1 class="baner-hdg">ReaDy To
            <span>Rumble</span>
            </h1>
        </div>
        </div>
    </div>
</section>
  <!-- end-main banner -->
  <!-- Who We Are -->
<div id="feed">
  <section class="guide-sec">
    <div class="container">
      <div class="tabs-sec-wraper">
        <div class="guide-sec-wrp">
          <h1 class="guide-h1" data-aos="fade-right">Guide</h1>
          <ul class="nav nav-tabs" role="tablist" data-aos="fade-left">
            <li class="nav-item">
              <a class="nav-link active" href="#recent" role="tab" data-toggle="tab"  @click="getFighters(1)">Recent</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#featured" role="tab" data-toggle="tab" data-id="2" @click="getFighters(2)">Featured</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#popular" role="tab" data-toggle="tab" data-value="3" @click="getFighters(3)">Popular</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#recent" role="tab" data-toggle="tab" data-id="4" @click="getFighters(4)">See All</a>
            </li>
          </ul>
        </div>
        <!-- Tab panes -->
        <div class="tab-content guide-tab-pane">
          <div role="tabpanel" class="tab-pane fade in active show" id="recent">
            <ul class="guide-tab-ul">
              <li data-aos="fade-down" v-for="rooster in roostersList">
                <a href="javascript:;">
                  <img src="img/guide-man.png">
                  <span v-text="rooster.name"></span>
                </a>
              </li>
            </ul>
          </div>

          <div role="tabpanel" class="tab-pane fade p-0" id="featured">
            <ul class="guide-tab-ul">
              <li data-aos="fade-down">
                <a href="javascript:;">
                  <img src="img/guide-man.png">
                  <span>Muhammad Ali</span>
                </a>
              </li>
              <li data-aos="fade-down">
                <a href="javascript:;">
                  <img src="img/guide-man1.png">
                  <span>Sugar Ray Robinson</span>
                </a>
              </li>
              <li data-aos="fade-right">
                <a href="javascript:;">
                  <img src="img/guide-man2.png">
                  <span>Jack Dempsey</span>
                </a>
              </li>
              <li data-aos="fade-up">
                <a href="javascript:;">
                  <img src="img/guide-man.png">
                  <span>Muhammad Ali</span>
                </a>
              </li>
              <li data-aos="fade-up">
                <a href="javascript:;">
                  <img src="img/guide-man1.png">
                  <span>Sugar Ray Robinson</span>
                </a>
              </li>
            </ul>
          </div>
          <div role="tabpanel" class="tab-pane fade p-0" id="popular">
            <ul class="guide-tab-ul">
              <li data-aos="fade-down">
                <a href="javascript:;">
                  <img src="img/guide-man.png">
                  <span>Muhammad Ali</span>
                </a>
              </li>
              <li data-aos="fade-down">
                <a href="javascript:;">
                  <img src="img/guide-man1.png">
                  <span>Sugar Ray Robinson</span>
                </a>
              </li>
              <li data-aos="fade-right">
                <a href="javascript:;">
                  <img src="img/guide-man2.png">
                  <span>Jack Dempsey</span>
                </a>
              </li>
              <li data-aos="fade-up">
                <a href="javascript:;">
                  <img src="img/guide-man.png">
                  <span>Muhammad Ali</span>
                </a>
              </li>
              <li data-aos="fade-up">
                <a href="javascript:;">
                  <img src="img/guide-man1.png">
                  <span>Sugar Ray Robinson</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="julio-sec">
        <h1 class="guide-h1" data-aos="fade-down">JULIO CESAR CHAVEZ</h1>
        <h4 class="guide-h4" data-aos="fade-up">From <span>BAHAMUT</span> on 06/30/2022 <img src="img/hand.png"></h4>
        <div class="row">

          <div class="col-md-4 juli-img-wraper" data-aos="flip-left" v-for="guides in guideData"  @click="divClick(guides.guide.id)">
            <div class="juli-img-box">
              <ul class="juli-img-player" data-aos="fade-up">
                <li v-for="fighter in guideData.fighter_guide">
                  <a href="javascript:;">
                    <img :src="'img/'+fighter.image">
                  </a>
                </li>
              </ul>
            </div>
            <h1 class="guide-h1" data-aos="fade-down"><span v-text="guides.guide.name"></span></h1>
            <h4 class="guide-h4" data-aos="fade-up">From <span v-text="guides.guide.name"></span> on 06/30/2022 <img src="img/hand.png">
            </h4>
          </div>


        </div>
      </div>
    </div>
  </section>
  <!-- Who We Are -->
  <!-- Tier List -->
  <section class="tier-list-sec">
    <div class="container">
      <div class="tabs-sec-wraper">
        <div class="guide-sec-wrp">
          <h1 class="guide-h1" data-aos="fade-right">Tier List</h1>
          <ul class="nav nav-tabs" role="tablist" data-aos="fade-left">
            <li class="nav-item">
              <a class="nav-link active" href="javascript:;" role="tab" data-toggle="tab" @click="getTeirs('RECENT')">Recent</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:;" role="tab" data-toggle="tab" @click="getTeirs('FEATURED')">Featured</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:;" role="tab" data-toggle="tab" @click="getTeirs('POPULAR')">Popular </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:;" @click="getTeirs('ALL')">See All</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-content tier-list-tabs">
        <div role="tabpanel" class="tab-pane fade in active show" id="tier-list-recent">
          <div class="tier-list-wpraper">
            <ul class="tier-list-ul" data-aos="fade-down">
                <li v-if="!teirdata.length">No tier found.</li>
              <li v-for="teir in teirdata">
                <img :src="'img/user/'+teir.user.icon">
                <h2 class="tier-list-h2" v-text="teir.user.name"></h2>
                <h3 class="tier-list-h3"> <span v-text="teir.user.name"></span><strong>Tier List</strong> / @{{teir.user.name}} <br>
                  Balance Patch - @{{ convertDate(teir.created_at) }}</h3>
              </li>
            </ul>
            <ul class="tier-list-ul2" data-aos="fade-up">

            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Tier List -->
  <!-- blog -->
    <section class="guide-sec blog-sec">
        <div class="container">
            <div class="tabs-sec-wraper">
                <div class="guide-sec-wrp">
                <h1 class="guide-h1" data-aos="fade-right">Blog</h1>
                <ul class="nav nav-tabs" role="tablist" data-aos="fade-left">
                    <li class="nav-item">
                    <a class="nav-link active" @click="getBlogs('recent')" data-filter="recent" role="tab" data-toggle="tab">Recent</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" @click="getBlogs('featured')" data-filter="featured" role="tab" data-toggle="tab">Featured</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" @click="getBlogs('popular')" data-filter="popular" role="tab" data-toggle="tab">Popular </a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" @click="getBlogs('all')" data-filter="all" data-filter="recent" role="tab" data-toggle="tab">See All</a>
                    </li>
                </ul>
                </div>
                <!-- Tab panes -->
                <div class="tab-content blog-wraper">
                    <div role="tabpanel" class="tab-pane fade in active show" id="blog-recent">
                        <div class="row">
                            <div class="col-md-4 juli-img-wraper" data-aos="fade-up" v-for="blog in blogData">
                                <div class="blogimgbx"><img :src="'img/blog/'+blog.image" class="img-fluid"></div>
                                <h1 class="blog-h1" v-text="blog.title"></h1>
                                <p class="blog-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum
                                has been the industry's standard dummy text ever since the 1500s,</p>
                                <a href="javascript:;" class="read-more-btn">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="create-acount-popup viewBuildModal">
        <div class="modal modalWindow fade" id="viewBuild" tabindex="-1"  role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modalWrapper">
                    <div class="edit-delete-button">
                        {{-- <a href="#">Eidt</a>
                        |
                        <a href="#">Delete</a> --}}
                    </div>
                    <div class="user-imge">
                        <img src="img/create-acount-img.png" class="img-fluid">
                        <h1 class="atr-ctr-act">Fausto Sandoval</h1>
                    </div>
                    <div class="atr-ctr-dtls">
                        <h4>Pros</h4>
                        <p v-text="guideDetailData.pros"></p>
                    </div>
                    <div class="atr-ctr-dtls">
                        <h4>Cons</h4>
                        <p v-text="guideDetailData.cons"></p>
                    </div>
                    <div class="atr-ctr-dtls">
                        <h4>Additional Notes:</h4>
                        <p v-text="guideDetailData.additional_notes"></p>
                    </div>
                    {{-- <ul class="comment-ul atr-ctr-dtls-ul">
                        <li>
                        <a href="javascript:;"><span>+</span> COMMENT </a>
                        </li>
                        |
                        <li>
                        <a href="javascript:;">SHARE </a>
                        </li>
                        |
                        <li>
                        <a href="javascript:;" @click="storeGuideLike()">LIKE </a>
                        </li>
                        |
                        <li>
                        <a href="javascript:;">COMMENTS</a>
                        </li>
                    </ul> --}}
                    <div class="comment-box">
                        <ul>
                            {{-- comment work --}}
                            <li v-for="comments in  guideDetailData.fighter_guide_comment"><span class="comment-span"  v-text="comments.user.name"> :  </span><span class="user-span" v-text="comments.comment"></span></li>
                        </ul>
                    </div>
                    @if (Auth::check())
                        <div id="contactform" class="atr-ctr-form fixedform-1 " data-form-type="signup_form">
                        <form id="promotionFormDiscounted" class="jform validate signupForm leadForm" method="post" enctype="multipart/form-data" action="javascript:void(0)">
                            <div class="mm-field  atr-ctr-textarea"  >
                                <textarea class="form-control " name="customers_meta[message]" id="msg" placeholder="There are no comments build for this." required v-model="comment"></textarea>
                            </div>
                            <div id="formResult"></div>
                            <div class="input-btn mt-4">
                                <button type="submit" id="signupBtn" value="1" name="signupForm" @click="storeComment">
                                SUBMIT
                                </button>
                            </div>
                        </form>
                        </div>
                    @endif
                    <a class="closeBtn" data-dismiss="modal" aria-label="Close" >CLOSE X</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
  </div>
  <!-- blog -->
  @endsection
  @section('scripts')
<script type="text/javascript">
  var app = new Vue({
              data: {
                guideData: [],
                fighter_guide_id : null,
                comment : null,
                guideDetailData: [],
                roostersList: [],
                guideFilter: null,
                blogData: [],
                teirdata:[],
                teirFilter:null
              },
              mounted: function () {
                  this.getGuide();
                  this.getFighters();
                  this.getBlogs();
                  this.getTeirs();
              },
              methods: {
                getGuide: function () {
                        _ajax.post('{{env("APP_URL")}}/get/feed/guide', {}, (res) => {
                                if (res.status) {
                                    this.guideData = res.data
                                }
                            });
                        },
                divClick: function (id) {

                  this.fighter_guide_id = id

                  _ajax.post('{{env("APP_URL")}}/get/guides/'+id, {}, (res) => {
                            if (res.status) {
                            this.guideDetailData = res.data
                            }
                        });
                  $('#viewBuild').modal('show');
                },
                storeComment: function () {

                  var data = {
                    fighter_guide_id : this.fighter_guide_id,
                    comment : this.comment,
                  }

                _ajax.post('{{env("APP_URL")}}/user/guide/store/comment', data, (res) => {
                          if (res.status) {
                            this.comment = null
                          }
                      });
                  },
                  getFighters: function (value) {
                      _ajax.post('{{env("APP_URL")}}/get/roosters/home', { filterValue : value }, (res) => {
                            if (res.status) {
                                  this.roostersList = res.data
                              }
                      });
                  },
                  storeGuideLike: function () {

                      var data = {
                        fighter_guide_id : this.fighter_guide_id
                      }

                      _ajax.post('{{env("APP_URL")}}/store/guide/like', data, (res) => {
                            if (res.status) {

                              }
                      });
                  },
                  getBlogs: function (value){

                    var filterValue = null;

                    if(value == null){
                       filterValue = 'recent';
                    }else{
                       filterValue = value;
                    }
                    var data = { filterValue : filterValue }

                    _ajax.post('{{env("APP_URL")}}/get/blogs/home', data, (res) => {
                            if (res.status) {
                                  this.blogData = res.data
                              }
                      });
                  },
                  getTeirs: function (value) {
                        _ajax.post('{{env("APP_URL")}}/get/teirs', { teirFilter: value }, (res) => {
                            if (res.status) {
                                this.teirdata = res.data
                            }
                        });
                    },
                  convertDate: function(created_at){
                      var date = moment(created_at).format('DD-MMM-YY');
                      return date;
                  }
              },

          }).$mount("#feed");
  </script>
  @endsection