@extends('layouts.app')
@section('content')
<!-- Who We Are -->
<div id="guideList">
<section class="login-area create-list">
  <div class="container">
    <div class="col-md-8 builds-area-wraper">
      <div class="serach-area builds-area" data-aos="fade-down">
        <form action="javascript:;">
          <button type="submit" id="searchMe"><img src="img/serarch-icon.png" @click="getAllGuide"></button>
          <input type="text" placeholder="Search" name="search" v-model="search">
        </form>
      </div>
      <h2 class="create-list-h2 " data-aos="fade-down"><a href="{{url('')}}/my/guides"> Create Guide</a></h2>
    </div>
    <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">
            <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 class="julio-sec" id="searchDiv">
      {{-- <h1 class="guide-h1" data-aos="fade-down">JULIO CESAR CHAVEZ's</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" v-if="!guideData.length">
            <h2>No guide found.</h2>
        </div>
        <div class="col-md-4 juli-img-wraper"  data-aos="flip-left"  v-for="guide in guideData" :href="'/user/guide/'+guide.id" @click="divClick(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" v-text="guide.name"></h1>
          <h4 class="guide-h4" data-aos="fade-up">From <span v-text="guide.user.name"></span> on <span v-text="convertDate(guide.created_at)"></span><img src="img/hand.png"></h4>
        </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="user-imge" v-if="guideDetailData.length > 0">
                  <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:;"><span>+</span> COMMENT </a>
                  </li>
                  |
                  <li>
                    <a href="javascript:;">SHARE </a>
                  </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 build-guide" 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 ></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>
<!-- Who We Are -->
@endsection
@section('scripts')
  <script type="text/javascript">

var app = new Vue({
                data: {
                    guideData: [],
                    fighter_guide_id : null,
                    comment : null,
                    guideDetailData: [],
                    search:null
                },
                mounted: function () {
                    this.getAllGuide();
                },
                methods: {
                    getGuide: function () {
                        _ajax.post('{{env("APP_URL")}}/get/guides-by-user', {}, (res) => {
                                if (res.status) {
                                    this.guideData = res.data
                                }
                            });
                        },
                    getAllGuide: function () {

                        _ajax.post('{{env("APP_URL")}}/get/all-guides', {keyword : this.search}, (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
                                }
                            });
                        },
                    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);
                                  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("#guideList");
  </script>
@endsection