@extends('layouts.app')
@section('content')

<div id="userGuide">
  <div class="userguide-section container">
    <div class="sidebar">
      <div class="widget user-avatar">
        <div class="padding">
          <a href="#" class="avatar" style="background-image: url('https://heroeshearth.com/images/heroes/gymi3olftaqrfdqusuys.jpg'); background-position: 0px 0px;"></a> <a href="{{url('')}}/m/Wes/" class="name">Wes</a>
          <div class="following-container">
            <div class="follow-button-container"> <a href="#" class="widget-follow-button" style="" userid="11518">follow</a> <a href="#" class="widget-unfollow-button" style="display: none;" userid="11518">following</a> </div>
            <div class="followers"> <span class="number">0</span>&nbsp; <span class="word">Followers</span> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mainbar">
      <div class="build-container">
        <div class="date"> Created November 5, 2022 </div>
        <h1>In the Rhythm</h1>
        <div class="tier-container">
          <div class="tier-number"> 1 </div>
          <div class="talent-image" style="background-image: url('https://heroeshearth.com/images/heroes/gymi3olftaqrfdqusuys.jpg');"></div>
          <div class="talent-info">
            <div class="talent-title">Dash</div>
            <div class="talent-description">Increase the range of Run and Gun by 50%. When cast, increase Tychus's Movement Speed by 20% for 2.5 seconds.</div>
          </div>
        </div>
        <div class="tier-container">
          <div class="tier-number"> 4 </div>
          <div class="talent-image" style="background-image: url('https://heroeshearth.com/images/heroes/gymi3olftaqrfdqusuys.jpg');"></div>
          <div class="talent-info">
            <div class="talent-title">In the Rhythm</div>
            <div class="talent-description">Quest: While Minigun is active, Basic Attacks against Heroes permanently increase future Minigun durations by 0.03 seconds.</div>
          </div>
        </div>
        <div class="tier-container">
          <div class="tier-number"> 7 </div>
          <div class="talent-image" style="background-image: url('https://heroeshearth.com/images/heroes/gymi3olftaqrfdqusuys.jpg');"></div>
          <div class="talent-info">
            <div class="talent-title">Combat Tactician</div>
            <div class="talent-description">Reduce the cooldown of Minigun by 4 seconds. Reduce the cooldown by an additional 4 seconds after using Run and Gun.</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- <div class="tier-container" v-for="guide in guideData">
    <div class="tier-number">
      @{{ guide.id }}
    </div>
    <img src="https://heroeshearth.com//images/heroes/gymi3olftaqrfdqusuys.jpg" class="img-fluid" alt="flag">
    <div class="talent-info">
      <div class="talent-title">   @{{ guide.name }}	</div>
      <div class="talent-description">Pros :-    @{{ guide.pros }}	</div>
      <div class="talent-description">Cons :-   @{{ guide.cons }}	</div>
    </div>
  </div> --}}
  
</div>
@endsection
@section('scripts')
  <script type="text/javascript">

var app = new Vue({
                data: {
                    guideData: [],
                    userData:[],
                    userId:{{ request()->id }}
                },
                mounted: function () {
                    this.getGuide();
                    this.getUser();
                },
                methods: {
                    getGuide: function () {
                      var data = {
                           userId : this.userId
                      }
                        _ajax.post('{{env("APP_URL")}}/user/guide', data, (res) => {
                                if (res.status) {
                                    this.guideData = res.data
                                }
                            });  
                    }, 
                    getUser: function () {
                      var data = {
                           userId : this.userId
                      }
                        _ajax.post('{{env("APP_URL")}}/user/detail', data, (res) => {
                                if (res.status) {
                                    this.userData = res.data
                                }
                            });  
                    }
                }
            }).$mount("#userGuide");
  </script>
@endsection