@extends('layouts.app')
@section('content')
<!-- Who We Are -->
<div id="teirDiv" >
    <section class="login-area create-list tierlist-without-login">
    <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="getTeirs"></button>
                <input type="text" placeholder="Search" name="search" v-model="search">
            </form>
        </div>
            @if (Auth::check())
                {{-- <h2 class="create-list-h2" @click="createNewTeir" data-aos="fade-down">Create List</h2> --}}
                <a class="create-list-h2" href="{{url('')}}/create/teir" data-aos="fade-down">Create List</a>
            @else
                <a class="create-list-h2" href="{{url('')}}/login" data-aos="fade-down">Create List</a>
            @endif
        </div>
        <div class="tierlist-wraper" id="searchDiv">
        <ul class="tierlist-details-ul">
                <li class="tierlist-header" data-aos="fade-down" data-aos-delay="100">
                    <div class="tierlist-heading">
                        <h1>Name</h1>
                    </div>
                    <div class="tierlist-heading">
                        <h1>Weight Class</h1>
                    </div>
                    <div class="tierlist-heading">
                        <h1>Patch</h1>
                    </div>
                    <div class="tierlist-heading">
                        <h1>Created</h1>
                    </div>
                </li>
                    <li class="brdr-btm" data-aos="fade-down" data-aos-delay="200" v-if="!teirData.length">
                        <h2>No tier found.</h2>
                    </li>
                    <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/user/'+ teir.user.icon" 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>
        </div>
    </div>
    </section>
    <section class="create-acount-popup">
        <div class="modal modalWindow fade" id="teirCategoryModal"  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 id="contactform" class="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)">
                                <h2 class="create-list-h2 aos-init aos-animate" data-aos="fade-down">Create New TierList</h2>
                                <div class="created-list-btn-option">
                                <select class="classic" v-model="fighterCategory">
                                    <option selected>Select a weight class</option>
                                    <option :value="category.id" v-for="category in fighterCategoryData">@{{category.name}}</option>
                                </select>
                                </div>
                                <div class="input-btn created-list-btn">
                                <button id="signupBtn" name="signupForm" @click="startNewTeir">
                                    Get Started
                                </button>
                                <a class="closeBtn" data-dismiss="modal" aria-label="Close">CLOSE X</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="create-acount-popup tierlist-login-create-sec">
        <div class="modal modalWindow fade" id="createTeir"  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">
                                {{-- @click="remove"  --}}
                            <h2>Tier One</h2>
                            <a class="droptarget"
                            v-on:drop="drop"
                            v-on:dragover="allowDrop" data-id="divOne"  data-index="1" href="#">+Drag a fighter here</a>
                            <div id="divOne" data-teirId="1" class="player-imglist dragFighter">
                                <img v-on:dragstart="dragStart"
                                v-on:drag="dragging"
                                draggable="true" 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 class="droptarget"
                            v-on:drop="drop"
                            v-on:dragover="allowDrop" 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 class="droptarget"
                            v-on:drop="drop"
                            v-on:dragover="allowDrop" 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 class="droptarget"
                            v-on:drop="drop"
                            v-on:dragover="allowDrop" 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 class="droptarget"
                            v-on:drop="drop"
                            v-on:dragover="allowDrop" 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="player-selection">
                            <ul id="fighterList" class="tier-one-listul"  class="droptarget"
                            v-on:drop="remove"
                            v-on:dragover="allowDrop">
                            <li v-for="fighter in fighterData" :data-id="fighter.id">
                            <img v-on:dragstart="dragStart"
                                v-on:drag="dragging"
                                draggable="true"
                                :id="'dragtarget'+fighter.id" :data-fighterid="fighter.id"  :src="'img/fighter/'+fighter.icon" class="img-fluid">
                            </li>
                            </ul>
                        </div>
                        <a class="closeBtn" data-dismiss="modal" aria-label="Close">CLOSE X</a>
                    </div>
                    <div class="input-btn drag-publishbtn ">
                        <button type="submit" id="signupBtn" value="1" name="signupForm" @click="publishTeir">
                        Publish Tier List
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section class="create-acount-popup tierlist-login-create-sec">
        <div class="modal modalWindow fade" 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 tier-model">
                        <div class="tierlist-login-create-dtls dtls-one" >
                            <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>
                                    <pre>
                                    <textarea rows="5" class="form-control" v-html="selected_teir_notes" readonly></textarea>
                                    <!-- <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>
                            <ul class="comment-ul atr-ctr-dtls-ul">
                                <li>
                                <a href="javascript:;" @click="commentplus()" style="cursor: pointer" ><span>+</span> COMMENT </a>
                                </li>
                                |
                                <li>
                                {{-- <a href="javascript:;">SHARE </a> --}}
                                <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 tier">
                                <ul>
                                    <li v-for="comment in comment_list"><span v-text="comment.user.name"></span>:-<span v-text="comment.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:void(0)">
                                    <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="comment"></textarea>
                                    </div>
                                    <div id="formResult"></div>
                                    <div class="input-btn mt-4">
                                        <button id="signupBtn" value="1" name="signupForm" @click="storeComment">
                                        SUBMIT
                                        </button>
                                    </div>
                                </form>
                                </div>
                        </div>
                        <a class="closeBtn" data-dismiss="modal" aria-label="Close">CLOSE X</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
   
</div>
@endsection
@section('scripts')
<script type="text/javascript">
    var app = new Vue({
        data: {
                teirData: [],
                fighterCategory : null,
                fighterCategoryData : [],
                fighterData:[],
                userTeirList:[],
                teirListData:[],
                teirListDetail:[],
                teirIndexOne:null,
                categoryId : null,
                tierFighter:[],
                newState:{},
                dragingElement:null,
                tier_id: null,
                comment:null,
                comment_list:[],
                search:null,
                selected_teir_notes: null
            },
            mounted: function () {
                    this.getTeirs();
                    this.getFighterCategories();
                    this.getFighter();
                },
                methods: {
                    commentplus: function () {
                        $(".commenttextarea").toggle();
                    },
                    tierlike: function () {
                        _ajax.post('{{env("APP_URL")}}/tierlike', { tierid:this.tier_id  }, (res) => {
                            if (res.status) {
                                console.log(true)
                            }
                        });
                    },
                    storeComment: function () {

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

                        _ajax.post('{{env("APP_URL")}}/store/teir/comment', data, (res) => {
                                if (res.status) {
                                  var commentArray = this.comment_list
                                  commentArray.push(res.data);
                                  this.comment = null
                                }
                            });
                    },
                    getTeirs: function () {
                        _ajax.post('{{env("APP_URL")}}/get/teirs', {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.teirData = res.data
                                this.teirid = res.data.id;

                            }
                        });
                    },
                    getFighter: function (id) {
                        _ajax.post('{{env("APP_URL")}}/get/fighters/for-teir', {categoryId : id}, (res) => {
                            if (res.status) {
                                this.fighterData = res.data
                            }
                        });
                    },
                    getFighterCategories: function () {
                        _ajax.post('{{env("APP_URL")}}/get/fighter/categories', {}, (res) => {
                            if (res.status) {
                                this.fighterCategoryData = res.data
                            }
                        });
                    },
                    createNewTeir: function () {
                        $('#teirCategoryModal').modal('show');
                    },
                    startNewTeir: function () {
                        this.getFighter(this.fighterCategory);
                        var data = {
                            category_id : this.fighterCategory
                        }
                        _ajax.post('{{env("APP_URL")}}/get/user/teir', data, (res) => {
                            if(res.status){
                                var fighterArray = [];
                                this.tierFighter = res.tierFighter
                                fighterArray = res.tierFighter
                                this.teirListData = res.data
                                this.teirListDetail = this.teirListData.tier_detail
                                this.teirIndexOne = res.data.tier_detail[0].tier_fighters

                                var fighterData = [];

                                for (var key in fighterArray) {
                                    for (var val in fighterArray[key]) {
                                        var dataArray = {
                                            fighter_id: fighterArray[key][val].fighter_id,
                                            tier_order: fighterArray[key][val].tier_order,
                                            teir_id: fighterArray[key][val].tier_order,
                                            tier_detail_id: fighterArray[key][val].tier_detail_id
                                        }
                                        fighterData.push(dataArray)
                                    }
                                }
                                this.userTeirList = fighterData
                                $('#teirCategoryModal').modal('hide');
                                $('#createTeir').modal('show');
                            }else{
                                $('#teirCategoryModal').modal('hide');
                                $('#createTeir').modal('show');
                            }
                        });
                    },
                    dragStart: function(event)  {
                        event.dataTransfer.setData("Text", event.target.id);
                        event.dataTransfer.setData("fighterId", event.target.dataset.fighterid);
                    },
                    dragging: function(event) {
                    },
                    allowDrop: function(event) {
                         event.preventDefault();
                    },
                    drop: function(event) {
                        var data = event.dataTransfer.getData("Text");
                        var fighterId = event.dataTransfer.getData("fighterid");
                        var divId = event.target.getAttribute('data-id');
                        var teirId = event.target.getAttribute('data-index');
                        var mainDiv = document.getElementById(divId);
                        mainDiv.appendChild(document.getElementById(data));

                        var data = {
                            teir_id : teirId,
                            fighter_id : fighterId
                        }
                        this.userTeirList.push(data);
                    },
                    arrayObjectIndexOf(myArray, searchTerm, property) {
                            for(var i = 0, len = myArray.length; i < len; i++) {
                                console.log(myArray[i][property],searchTerm);
                                if (myArray[i][property] == searchTerm) return i;
                            }
                            return -1;
                    },
                    remove: function(event) {
                        var fighter_id = event.dataTransfer.getData("fighterid");
                        myIndex = this.arrayObjectIndexOf(this.userTeirList,fighter_id, "fighter_id");
                        if(myIndex !== -1){
                            this.userTeirList.splice(myIndex, 1);
                        }
                        event.preventDefault();
                        var data = event.dataTransfer.getData("Text");
                        var fighterId = event.dataTransfer.getData("fighterid");
                        var mainDiv = document.getElementById('fighterList');
                        mainDiv.appendChild(document.getElementById(data));
                    },
                    publishTeir: function(){
                        var data = {
                            'categoryId'   : this.fighterCategory,
                            'userTeirList' :  this.userTeirList
                        }
                        _ajax.post('{{env("APP_URL")}}/store/teir',data,function(res){
                            if(res.status){
                                alert('success')
                            }
                        });
                    },
                    convertDate: function(created_at){
                        var date = moment(created_at).format('DD-MMM-YY');
                        return date;
                    },
                    showTeir: function (id) {
                        this.tier_id = id;
                    _ajax.post('{{env("APP_URL")}}/get/user/teir-by-id', {teir_id: id }, (res) => {
                            if (res.status) {
                                this.tierFighter = res.teirModel
                                this.comment_list = res.comment
                                this.selected_teir_notes = res.teir.notes
                                $('#viewuserteir').modal('show');
                            }
                        });
                    }
                }
    }).$mount("#teirDiv");
</script>
@endsection