@extends('layouts.app')
@section('content')
<div id="myProfile">
<div class="page">
    <div class="container profile-top legendary">
        <div class="avatar profile-header-avatar" style="background-image: url('{{'/images/user/'.$icon}}'); background-position: center center;">
            <div class="cover nomove" style="display: block;">
                <div class="cover-background"></div>
                <a href="#" class="avatar-edit-button" title="edit avatar"><img src="{{ asset('/img/user/'.$icon) }}"></a>
            </div>
        </div>
        <div class="tabs effect-1">
			<!-- tab-title -->
			<input type="radio" id="tab-1" name="tab-effect-1" checked="checked">
			<span>BUILDS</span>
			<input type="radio" id="tab-2" name="tab-effect-1">
			<span>TIER LISTS</span>
			<!-- tab-content -->
			<div class="tab-content">
				<section id="tab-item-1">
                    <h4>RECENT BUILDS</h4>
                    <div class="row">
                        <div class="col-lg-4 col-md-12 col-sm-12 text-center mb-5" v-for="guide in guideData" @click="viewBuild(guide.id)">
                            <div class="content-box">
                                <img alt="Real-time information" title="Real-time information" class="finbyz-icon img-responsive" src="{{ asset('img/login-player-bg-.png') }}">
                                <div class="content-info">
                                    <h4 class="content-box-title" v-text="guide.name"></h4>
                                    <p v-text="guide.pros"></p>
                                    <p v-text="guide.cons"></p>
                                </div>
                            </div>
                        </div>
                    </div>
				</section>
				<section id="tab-item-2">
                    <div class="tier-list">
					    <h4>TIER LIST</h4>
                        <div class="component-container">
                            {{-- <h1>Data Not Found</h1> --}}
                            <ul class="tierlist-details-ul">
                            <li class="brdr-btm" data-aos="fade-down" data-aos-delay="200" v-for="teir in teirData" @click="showTeir(teir.id)" >
                              <div class="player-name ">
                                  <a href="javascript:;">
                                      <img src="./img/guide-man1.png" class="players-img img-fluid">
                                      <h2 v-text="teir.name"><br><span v-text="teir.user.name"></span></h2>
                                  </a>
                              </div>
                              <div class="player-name">
                                  <h5 v-text="teir.category.name"></h5>
                              </div>
                              <div class="player-name">
                                  <h5>Patch 08/14/22</h5>
                              </div>
                              <div class="player-name">
                                  <h5 v-text="convertDate(teir.created_at)"></h5>
                              </div>
                          </li>
                         </ul>
                            {{-- <a href="#" class="component">
                                <div class="tier-title">
                                    <h5>Battlefield Of Eternity Tier List</h5>
                                </div>
                                <div class="tier-info">
                                    <p>Battlefield Of Eternity</p>
                                    <p class="ml-2 mr-2">Balance Patch - 05/18/2021</p>
                                    <p>Created on 9/8/22</p>
                                </div>
                            </a>
                            <a href="#" class="component">
                                <div class="tier-title">
                                    <h5>Battlefield Of Eternity Tier List</h5>
                                </div>
                                <div class="tier-info">
                                    <p>Battlefield Of Eternity</p>
                                    <p class="ml-2 mr-2">Balance Patch - 05/18/2021</p>
                                    <p>Created on 9/8/22</p>
                                </div>
                            </a>
                            <a href="#" class="component">
                                <div class="tier-title">
                                    <h5>Battlefield Of Eternity Tier List</h5>
                                </div>
                                <div class="tier-info">
                                    <p>Battlefield Of Eternity</p>
                                    <p class="ml-2 mr-2">Balance Patch - 05/18/2021</p>
                                    <p>Created on 9/8/22</p>
                                </div>
                            </a>
                            <a href="#" class="component">
                                <div class="tier-title">
                                    <h5>Battlefield Of Eternity Tier List</h5>
                                </div>
                                <div class="tier-info">
                                    <p>Battlefield Of Eternity</p>
                                    <p class="ml-2 mr-2">Balance Patch - 05/18/2021</p>
                                    <p>Created on 9/8/22</p>
                                </div>
                            </a>
                            <a href="#" class="component">
                                <div class="tier-title">
                                    <h5>Battlefield Of Eternity Tier List</h5>
                                </div>
                                <div class="tier-info">
                                    <p>Battlefield Of Eternity</p>
                                    <p class="ml-2 mr-2">Balance Patch - 05/18/2021</p>
                                    <p>Created on 9/8/22</p>
                                </div>
                            </a> --}}
                        </div>
                    </div>
				</section>
			</div>
		</div>
    </div>
</div>


<section class="create-acount-popup tierlist-login-create-sec">
  <div class="modal modalWindow fade profile-tier" id="viewuserteir"  role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content tier-content">
              <div class="modalWrapper tier-wrapper">
                  <div class="tierlist-login-create-dtls" >
                      <div class="tier-one-list">
                          <h2>Tier One</h2>
                          <a class="droptarget" data-id="divOne"  data-index="1" href="#">+Drag a fighter here</a>
                          <div id="divOne" data-teirId="1" class="player-imglist dragFighter">
                              <img v-for="fighter in tierFighter[1]" :id="'dragtarget'+fighter.fighter_id" :data-fighterid="fighter.fighter_id" :src="'img/fighter/'+fighter.icon" />
                          </div>
                          <div class="tier-one-ctreatelist-details" >
                              <h4><span></span> Notes For Tier One</h4>
                              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                          </div>
                      </div>
                      <div class="tier-one-list">
                          <h2>Tier Two</h2>
                          <a  data-id="divTwo" data-index="2" href="#">+Drag a fighter here</a>
                          <div id="divTwo" data-teirId="2"  class="player-imglist dragFighter">
                              <img  v-for="fighter in tierFighter[2]" src="img/fighter/guide-man.png" />
                          </div>
                          <div class="tier-one-ctreatelist-details tier-two-point mt-4">
                              <h4><span></span> Notes For Tier One</h4>
                          </div>
                      </div>
                      <div class="tier-one-list">
                          <h2>Tier Three</h2>
                          <a  data-id="divThree" data-index="3" href="#">+Drag a fighter here</a>
                          <div id="divThree" data-teirId="3"  class="player-imglist dragFighter">
                              <img v-for="fighter in tierFighter[3]" src="img/fighter/guide-man.png" />
                          </div>
                          <div class="tier-one-ctreatelist-details tier-two-point">
                              <h4><span></span> Notes For Tier One</h4>
                          </div>
                      </div>
                      <div class="tier-one-list">
                      <h2>Tier Four</h2>
                      <a  data-id="divFour" data-index="4"  href="#">+Drag a fighter here</a>
                      <div id="divFour" data-teirId="4"  class="player-imglist dragFighter">
                          <img v-for="fighter in tierFighter[4]" src="img/fighter/guide-man.png" />
                      </div>
                      <div class="tier-one-ctreatelist-details tier-two-point mt-4">
                          <h4><span></span> Notes For Tier One</h4>
                      </div>
                      </div>
                      <div class="tier-one-list">
                      <h2>Tier Five</h2>
                      <a  data-id="divFive" data-index="5" href="#">+Drag a fighter here</a>
                      <div id="divFive" data-teirId="5"  class="player-imglist dragFighter">
                          <img v-for="fighter in tierFighter[5]" src="img/fighter/guide-man.png" />
                      </div>
                      <div class="tier-one-ctreatelist-details tier-two-point mt-4">
                          <h4><span></span> Notes For Tier One</h4>
                      </div>
                      </div>
                  </div>
                  <div class="comments-modal">
                    <a class="btn btn-success" :href="'/create/teir?categoryid'+category_id">Edit</a>
                    <ul class="comment-ul atr-ctr-dtls-ul">
                        <li>
                          <a href="javascript:;" @click="commentplus()" style="cursor: pointer" ><span>+</span> COMMENT </a>
                        </li>
                        |
                        {{-- <li>
                          <div class="fb-share-button" data-href="" data-layout="button_count" data-size="small"><a target="_blank" href="" class="fb-xfbml-parse-ignore">Share</a></div>
                        </li>| --}}
                        <li>
                          <a href="javascript:;" @click="tierlike()" >LIKE </a>
                        </li>
                        |
                        <li>
                          <a href="">COMMENTS</a>
                        </li>
                      </ul>
                      <div class="comment-box">
                        <ul>
                            <li v-for="teirComment in teirCommentArray"><span v-text="teirComment.user.name"></span>:-<span v-text="teirComment.comment"></span></li>
                        </ul>
                      </div>

                        <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:;">
                              <div class="mm-field  atr-ctr-textarea commenttextarea" style="display: none">
                                <textarea class="form-control " name="" id="msg"  placeholder="There are no comments build for this." required v-model="teirComment"></textarea>
                              </div>
                              <div id="formResult"></div>
                              <div class="input-btn mt-4">
                                <button type="submit" id="signupBtn" value="1" name="signupForm" @click="storeCommentTeir">
                                  SUBMITs
                                </button>
                              </div>
                          </form>
                        </div>
                </div>
                  <a class="closeBtn" data-dismiss="modal" aria-label="Close">CLOSE X</a>
              </div>
          </div>
      </div>
  </div>
</section>


<section class="create-acount-popup">
    <div class="modal modalWindow fade" id="buildView" 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="javascript:;" @click="deleteGuide(fighterGuide.id)">Delete</a>
        </div>
        <div class="user-imge" v-if="fighterGuide.fighter">
            <img :src="'img/fighter/'+fighterGuide.fighter.icon" class="img-fluid">
            <h1 class="atr-ctr-act"  v-text="fighterGuide.fighter.name"></h1>
        </div>
        <div class="atr-ctr-dtls">
          <h4>Pros</h4>
          <p v-text="fighterGuide.pros"></p>
        </div>
        <div class="atr-ctr-dtls">
          <h4>Cons</h4>
          <p v-text="fighterGuide.cons"></p>
        </div>
        <div class="atr-ctr-dtls">
          <h4>Additional Notes:</h4>
          <p v-text="fighterGuide.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:;">LIKE </a></li>
            |<li><a href="javascript:;">COMMENTS</a></li></ul> --}}
        <ul>
            <li v-for="comments in  fighterGuide.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 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)">
            <!--hidden required values-->
            <input type="hidden" id="formType" name="formType">
            <input type="hidden" id="referer" name="referer">
            <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>
        <a class="closeBtn" data-dismiss="modal" aria-label="Close" >CLOSE X</a>
      </div>
    </div>
</div>
</div>
</div>
</section>



</div>
@endsection
@section('scripts')
<script type="text/javascript">
  var app = new Vue({
            data: {
                guideData: [],
                fighterGuide:[],
                fighter_id:null,
                fighter_guide_id:null,
                comment:null,
                teirData:[],
                tierFighter:[],
                category_id:null,
                tierid: null,
                teirComment:null,
                teirCommentArray:[]
              },
              mounted: function () {
                  this.getGuide();
                  this.getTeirs();
              },
              methods: {
                commentplus: function () {
                    $(".commenttextarea").toggle();
                },
                tierlike: function () {
                        _ajax.post('{{env("APP_URL")}}/tierlike', { tierid:this.tierid, user_id: {{ Auth::id() > 0 ? Auth::id() : '' }}  }, (res) => {
                            if (res.status) {
                              console.log(true)
                            }
                        });
                },
                getGuide: function () {

                    _ajax.post('{{env("APP_URL")}}/user/guide/myprofile', { }, (res) => {

                          if (res.status) {
                                this.guideData = res.data
                              }
                            });
                },
                viewBuild: function (id) {

                    _ajax.post('{{env("APP_URL")}}/get/guides/'+id, { }, (res) => {
                                    if (res.status) {
                                        this.fighterGuide = res.data
                                        this.fighter_id = res.data.fighter_id
                                        this.fighter_guide_id = res.data.id
                                        $('#buildView').modal('show');
                                    }
                                });
                },
                deleteGuide: function (id){

                    _ajax.post('{{env("APP_URL")}}/delete/guide', {id : id}, (res) => {
                                    if (res.status) {
                                    }
                                });
                },
                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
                              }
                          });
                },
                getTeirs: function () {
                        _ajax.post('{{env("APP_URL")}}/get/teirs', { }, (res) => {
                            if (res.status) {
                                this.teirData = res.data
                                this.teirid = res.data.id;
                            }
                        });
                    },
                convertDate: function(created_at){
                          var date = moment(created_at).format('MM/DD/YYYY');
                          return date;
                },
                showTeir: function (id) {
                    this.tierid = id;
                    this.tierFighter = []
                    _ajax.post('{{env("APP_URL")}}/get/user/teir-by-id', { teir_id : id }, (res) => {
                            if (res.status) {
                                  this.tierFighter = res.teirModel
                                  this.category_id = res.category_id
                                  this.teirCommentArray = res.comment
                                  $('#viewuserteir').modal('show');
                            }
                        });
                    },
                storeCommentTeir: function () {

                    var data = {
                            tier_id : this.tierid,
                            comment : this.teirComment,
                        }

                    _ajax.post('{{env("APP_URL")}}/store/teir/comment', data, (res) => {
                            if (res.status) {
                                this.teirComment = null
                              }
                          });
                }
            }
}).$mount("#myProfile");
  </script>
  @endsection