@extends('layouts.app')
@section('content')
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0" nonce="3w6l0MgK"></script>
<section class="login-area home-login-area">
  <div id="feed">
  <div class="container">
    <div class="row no-gutters justify-content-between">
      <div class="col-md-8 login-area-wraper">
        <div class="serach-area home-login" data-aos="fade-down">
          <form action="javascript:;">
            <button type="submit" id="searchMe" ><img src="img/serarch-icon.png" @click="getFeed"></button>
            <input type="text" placeholder="Search" name="search" v-model="search">
          </form>
        </div>
        <div class="tabs-sec-wraper">
          <div class="guide-sec-wrp login-tabs-sec">
            <ul class="nav nav-tabs" role="tablist" data-aos="fade-left">
              <li class="nav-item">
                <a class="nav-link active" href="#login-recent" role="tab" data-toggle="tab" data-filter="RECENT" @click="filterHandler" >Recent</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#login-featured" role="tab" data-toggle="tab" data-filter="FEATURED" @click="filterHandler">Featured</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#login-popular" role="tab" data-toggle="tab" data-filter="POPULAR" @click="filterHandler">Popular </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#login-recent" role="tab" data-toggle="tab" data-filter="SEEALL" @click="filterHandler">See All</a>
              </li>
            </ul>
          </div>
          <!-- Tab panes -->

          {{-- start --}}
          <div class="tab-content login-tab-pane">
            <div role="tabpanel" class="tab-pane fade in active show" id="login-recent">

              <div class="memmber-data" data-aos="fade-down" v-if="topGuide != null">
                <img class="img-fluid" :src="'img/'+topGuide.user.icon">
                <div class="name-date">
                  <h1 class="login-h1" v-text="topGuide.user.name"></h1>
                  <span v-text="'shared a build | '+convertDate(topGuide.created_at)"></span>
                </div>
              </div>
              <div class="login-player-area" v-if="topGuide != null" @click="divClick(topGuide.id)">
                <ul class="juli-img-player" data-aos="fade-up">
                  <li>
                    <a href="javascript:;">
                      <img src="img/guide-man.png">
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="img/guide-man1.png">
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="img/guide-man2.png">
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="img/guide-man.png">
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="img/guide-man1.png">
                    </a>
                  </li>
                </ul>
              </div>
              <div class="comment-area-wraper" data-aos="fade-up" v-if="topGuide != null">
                <h1 class="login-h1"><span v-text="topGuide.name"></span></h1>
                <div class="comment-area">
                 {{--  <img src="img/tier-list-img8.png" class="img-fluid">
                  <a href="javascript:;">
                    <h3>Sander Sammy <br>
                      <span> Creator </span>
                    </h3>
                  </a> --}}
                </div>
                <ul class="comment-ul">
                  <li>
                    <a href="javascript:;"><span>+</span> COMMENT </a>
                  </li>
                  |
                  <li>
                    <a class="twitter-share-button" data-size="large"
                    href="https://twitter.com/intent/tweet?text=https://esbczone.designwebdemos.com/">
                  Tweet</a>
                  </li>
                  |
                  <li>
                    {{-- <a href="javascript:;">SHARE </a> --}}
                    <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://esbczone.designwebdemos.com/&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
                  </li>
                  |
                  <li>
                    <a href="javascript:;">LIKE </a>
                  </li>
                  {{-- |
                  <li>
                    <a href="javascript:;">COMMENTS</a>
                  </li> --}}
                </ul>
              </div>
              <div class="row" id="searchDiv">
                <div class="col-md-5 juli-img-wraper mt-3" data-aos="flip-left" v-if="!guideData.length">
                    <h2>No guide found.</h2>
                </div>
                  <div class="col-md-4 juli-img-wraper" data-aos="flip-left" v-for="guides in guideData"  @click="divClick(guides.guide.id)" v-if="guides.guide != null" >
                  <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 <span v-text="convertDate(guides.created_at)"></span> <img src="img/hand.png">
                  </h4>
                </div>
              </div>
              {{-- <div class="login-player-area login-player-area2"></div> --}}
            </div>
          </div>
          {{-- end --}}
        </div>
      </div>
      <div class="col-md-3 side-blogs">
        <div class="profile-sec" data-aos="fade-left">
          <h2 class="profile-sec-h2">Profile</h2>
          <div class="profile-sec-wrpr">
            <img :src="'img/user/'+icon" class="img-fluid">
            <h1 v-text="userName"></h1>
            <ul class="profile-edit">
              <li>
                <a href="javascript:;" @click="editProfileHandler">
                  <span>Edit Profile</span>
                </a>
                <a href="javascript:;">
                  <img src="img/edit-profile.png">
                </a>
              </li>
              <li>
                <a href="{{url('')}}/guides">
                  <span>Builds</span>
                </a>
                <a href="{{url('')}}/guides">
                  <img src="img/builds.png">
                </a>
              </li>
              <li>
                <a href="{{url('')}}/teir">
                  <span>Tiers</span>
                </a>
                <a href="{{url('')}}/teir">
                  <img src="img/tiers.png">
                </a>
              </li>
              @if (Auth::check())
                @if (Auth::user()->type_id == 1)
                  <li>
                    <a href="{{url('')}}/manage/blog">
                      <span>Blog</span>
                    </a>
                    <a href="{{url('')}}/manage/blog">
                      <img src="img/blog.png">
                    </a>
                  </li>
                @endif
              @endif
            </ul>
          </div>
        </div>
        <h2 class="profile-sec-h2 blog-sec-h2" data-aos="fade-down">Recent Blog</h2>
        <div class="blog-sec" data-aos="fade-left" v-for="blog in blogData">
            <img :src="'img/'+blog.image" class="img-fluid">
            <h1 class="blog-h1" v-text="blog.title"></h1>
            <p class="blog-p" v-text="blog.content"></p>
            <a :href="'/blog/'+blog.id" class="read-more-btn">Read More</a>
        </div>
      </div>
    </div>
  </div>

  <section class="create-acount-popup">
    <div class="modal modalWindow fade" id="userProfileHome" 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">
                  <form id="updateUser" class="jform validate signupForm leadForm" method="post" enctype="multipart/form-data" action="javascript:void(0)">
                      <div class="user-imge">
                        <!-- <img src="{{ asset('img/create-acount-img.png') }}" id="imagePreview" class="img-fluid" alt="" /> -->
                        <img :src="'{{url('/img/user')}}/' + icon" id="imagePreview" style="max-height: 150px;min-height: 150px;" class="img-fluid" alt="" />
                        
                        <input type="hidden" id="newImage" value=""/>
                        <label for="myfile">
                          <i class="fa-solid fa-pen"></i>
                          <input type="file" name="myfile" id="myfile" @change="imageSelect" />
                    </label>
                        <h1>User Detail</h1>
                      </div>
                      <div id="contactform" class="fixedform-1 " data-form-type="signup_form">
                          <div class="mm-field ">
                            <input type="text"  placeholder="User Name" name="user_name" v-text="userName" v-model="userName">
                          </div>
                          <div class="mm-field ">
                            <input type="text" placeholder="email" name="email" v-text="email"  v-model="email">
                          </div>
                          <div class="mm-field ">
                            <input type="password" placeholder="password" name="password"  v-model="password" class="password" >
                          </div>
                          <div class="mm-field ">
                            <input type="password" placeholder="Confirm Password" name="confirm_password"  v-model="confirmPassword" class="password" >
                          </div>
                          <div id="formResult"></div>
                          <div class="input-btn">
                            <button  class="btn btn-secondary modalSubmitBtn" @click="updateProfile">Publish</button>
                          </div>
                        <a class="closeBtn" data-dismiss="modal" aria-label="Close" > CLOSE X</a>
                      </div>
                    </form>
                </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" v-if="guideDetailData.fighter">
                    <img :src="'img/fighter/'+guideDetailData.fighter.icon" class="img-fluid">
                    <h1 class="atr-ctr-act"  v-text="guideDetailData.fighter.name"></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:;" @click="commentplus()" ><span>+</span> COMMENT </a>
                    </li>
                    |
                    <li>
                      {{-- <a href="javascript:;">SHARE </a> --}}
                      <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://esbczone.designwebdemos.com/&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
                    </li>
                    |
                    <li>
                      <a href="javascript:;" @click="storeGuideLike()"><span v-text="guideDetailData.fighter_guide_like_count"></span>-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.email"> :  </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 home-comment" 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 commenttextarea" style="display: none">
                            <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>
</section>
@endsection
@section('scripts')
<script type="text/javascript">
  var app = new Vue({
              data: {
                  feedData: [],
                  blogData: [],
                  topGuide: null,
                  userName:null,
                  email:null,
                  password:null,
                  confirmPassword:null,
                  icon:null,
                  guideData:[],
                  guideDetailData: {},
                  comment : null,
                  search:null,
                  filterValue : null
              },
              mounted: function () {
                  this.getUserDetail();
                  this.getBlogs();
                  this.getFeed();
              },
              methods: {
                commentplus: function () {
                    $(".commenttextarea").toggle();
                },
                filterHandler: function (e) {
                    var filter = e.target.dataset.filter;
                    this.filterValue = filter;
                    this.getFeed();
                },
                getFeed: function () {
                  var data = {
                        filterValue : this.filterValue,
                        keyword : this.search
                  }
                    _ajax.post('{{env("APP_URL")}}/get/feed/guide', data, (res) => {
                          if (res.status) {
                              scrollTo = (element) => {
                                  window.scroll({
                                      behavior: 'smooth',
                                      left: 0,
                                      top: element.offsetTop
                                  });
                              }
                                  document.getElementById("searchMe").addEventListener('click', () => {
                                  scrollTo(document.getElementById("searchDiv"));
                              });
                              this.guideData = res.data
                              this.topGuide = res.topGuide
                          }
                      });

                  },
                  getUserDetail: function () {
                    _ajax.post('{{env("APP_URL")}}/get/user-details', {}, (res) => {
                      console.log('res.data', res.data)
                            if (res.status) {
                                this.feedData = res.data,
                                this.userName = res.data.name,
                                this.email =  res.data.email
                                this.icon = res.data.icon
                              }
                        });
                  },
                  getBlogs: function () {
                    _ajax.post('{{env("APP_URL")}}/get/blogs', {}, (res) => {
                            if (res.status) {
                                this.blogData = res.data
                            }
                        });
                  },
                  editProfileHandler: function () {
                    _ajax.post('{{env("APP_URL")}}/get/user-details', {}, (res) => {
                            if (res.status) {
                              this.userName = res.data.name,
                              this.email =  res.data.email
                              this.icon = res.data.icon
                              $('#userProfileHome').modal('show');
                            }
                        });
                  },
                  updateProfile: function () {

                    var myform = document.getElementById("updateUser");
                    data = new FormData(myform);

                    _ajax.postFormData('{{env("APP_URL")}}/update/user-detail', data, (res) => {
                            if (res.status) {
                                this.userName = this.userName
                                $('#userProfileHome').modal('hide');
                                window.location.reload()
                            }
                        });

                  },
                  imageSelect: function (event) {

                    var _this = this;
                      if (event.target.files && event.target.files[0]) {

                          var reader = new FileReader();

                          reader.onload = function (e) {
                              $('#imagePreview')
                                  .attr('src', e.target.result)
                                  .width(150)
                                  .height(200);
                              $('#newImage').val(e.target.result)
                          }

                          reader.readAsDataURL(event.target.files[0]);

                          var youtubeimgsrc = document.getElementById('newImage').value;
                          let file = event.target.files[0];
                          this.filePath = youtubeimgsrc;
                          this.fileName = file.name
                          this.fileType = file.type
                        }
                  },
                  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) {
                                  var commentArray = this.guideDetailData.fighter_guide_comment
                                  commentArray.push(res.data);
                                  // $('.comment-box').closest("ul").append("<li><span class='comment-span'>"+res.data.user_id+"</span><span class='user-span'>"+res.data.comment+"</span><li>");
                                  this.comment = null
                              }
                          });
                      },
                  storeGuideLike: function () {

                      var data = {
                        fighter_guide_id : this.fighter_guide_id
                      }

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

                              }
                      });
                  },
                        convertDate: function(created_at){

                          var date = moment(created_at).format('DD-MMM-YY');
                          return date;

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