/********** Like.vue **********/
<template>
  <div class="like mt-3" v-cloak>
    <span class="badge badge-primary">{{ like.length }} Like</span>
    <span class="badge badge-danger">{{ unlike.length }} Unlike</span>
    <span class="float-right" v-if="user">
      <button class="btn btn-primary" @click="likePost" v-if="canLike"><i class="fa fa-fw fa-thumbs-up" title="Like This Tutorial"></i></button>
      <button class="btn btn-danger" @click="unlikePost" v-if="canUnlike"><i class="fa fa-fw fa-thumbs-down" title="Ublike This Tutorial"></i></button>
    </span>
  </div>
</div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    user: {
      type: Object
    },
    developer_id: {
      type: String
    },
    url: {
      type: String,
      required: true
    }
  },
  data(){
    return {
      like: [],
      unlike: [],
      canLike: true,
      canUnlike: true
    }
  },
  methods: {
    likePost(){
      var app = this;
      axios.post(app.url+'/tutorial/like', {
        tutorial_id: app.id,
        user_id: app.user.id,
        developer_id: app.developer_id
      })
      .then((response) => {
        app.like.push(response.data);
        app.canLike = false;
        app.canUnlike = true;

        app.unlike.forEach(function(u) {
          if(u.developer_id == response.data.developer_id){
            var index = app.unlike.indexOf(u);
            app.unlike.splice(index, 1);
          }
        });
      })
      .catch((e) => {
        console.log(e);
      })
    },
    unlikePost(){
      var app = this;
      axios.post(app.url+'/tutorial/unlike', {
        tutorial_id: app.id,
        user_id: app.user.id,
        developer_id: app.developer_id
      })
      .then((response) => {
        app.unlike.push(response.data);
        app.canUnlike = false;
        app.canLike = true;

        app.like.forEach(function(l) {
          if(l.developer_id == response.data.developer_id){
            var index = app.unlike.indexOf(l);
            app.like.splice(index, 1);
          }
        });
      })
      .catch((e) => {
        console.log(e);
      })
    }
  },
  mounted() {
    var app = this;
    axios.get(app.url+'/tutorial/likes/'+this.id)
    .then((response) => {
      app.like = response.data;

      app.like.forEach(function(l) {
        if(l.developer_id == app.user.id){
          app.canUnlike = true;
          app.canLike = false;
        }
      });
    })
    .catch((e) => {
      console.log(e);
    })

    axios.get(this.url+'/tutorial/unlikes/'+this.id)
    .then((response) => {
      app.unlike = response.data;

      app.unlike.forEach(function(u) {
        if(u.developer_id == app.user.id){
          app.canUnlike = false;
          app.canLike = true;
        }
      });
    })
    .catch((e) => {
      console.log(e);
    })
  },
  computed: {

  }
}
</script>

/********** Registration.vue **********/
<style scoped>
.required-icon{
    font-size: 18px;
    font-weight: bolder;
    color: #f30a0a;
}
.form-signin{
    max-width: 700px;
}
</style>

<template>
    <div class="profile-picture-change-widget mt-2">
        <!-- <div class="alert alert-danger" v-if="errors"> </div> -->
        <div class="form-signin">
          <center>
            <h2 class="mb-3 pricing-title">Sign Up Now</h2>
        </center>
        <form @submit.prevent="submitForm">

            <div class="alert alert-success" v-if="submitStatus == 'OK'">
                <i class="fa fa-check"></i>
                An email has sent to you. Please verify your account.
            </div>

            <div class="alert alert-danger" v-if="submitStatus === 'ERROR'">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <p>Please correct the error</p>
                <ul>
                 <li v-for="sError in serverErrors">
                     <i class="fa fa-warning"></i>  {{ sError[0] }}
                 </li>
             </ul>
         </div>
         <div class="form-group row">
            <label for="first_name" class="col-sm-3 col-form-label">Your First Name
                <span class="required-icon">*</span>
            </label>
            <div class="col-sm-6">
                <input type="text"
                v-model.trim="$v.first_name.$model"
                class="form-control"
                :class="{' is-invalid': $v.first_name.$error}"
                id="first_name"
                name="first_name"
                placeholder="Write Your First Name">
            </div>
            <div class="col-sm-3">
                <div v-if="$v.first_name.$error" class="text-danger">
                    <span><i class="fa fa-warning"></i></span>
                    <span v-if="!$v.first_name.required"> Please give your first name
                        <span class="required-icon">*</span>
                    </span>
                    <span v-if="!$v.first_name.minLength">
                        First name will be greater than or equal 3 characters
                    </span>
                    <span v-if="!$v.first_name.maxLength">
                        First name will be less than or equal 20 characters
                    </span>
                </div>
                <div v-else-if="first_name == ''"></div>
                <div v-else>
                    <i class="fa fa-check text-success"></i>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label for="last_name" class="col-sm-3 col-form-label">Your Last Name</label>
            <div class="col-sm-6">
                <input type="text"
                v-model.trim="$v.last_name.$model"
                class="form-control"
                :class="{' is-invalid': $v.last_name.$error}"
                id="last_name"
                name="last_name"
                placeholder="Write Your Last Name">
            </div>
            <div class="col-sm-3">
                <div v-if="$v.last_name.$error" class="text-danger">
                    <span><i class="fa fa-warning"></i></span>
                    <span v-if="!$v.last_name.minLength">
                        Last name will be greater than or equal 3 characters
                    </span>
                    <span v-if="!$v.last_name.maxLength">
                        Last name will be less than or equal 15 characters
                    </span>
                </div>
                <div v-else-if="last_name == ''"></div>
                <div v-else>
                    <i class="fa fa-check text-success"></i>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label for="username" class="col-sm-3 col-form-label">Your Username
                <span class="required-icon">*</span>
            </label>
            <div class="col-sm-6">
                <input type="text"
                v-model.trim="$v.username.$model"
                class="form-control"
                :class="{' is-invalid': $v.username.$error || usernameStatus === 'error'}"
                id="username"
                name="username"
                placeholder="Write Your Username">
            </div>
            <div class="col-sm-3">
                <div v-if="$v.username.$error" class="text-danger">
                    <span><i class="fa fa-warning"></i></span>
                    <span v-if="!$v.username.required"> Please give your username</span>
                    <span v-if="!$v.username.minLength">
                        User name will be greater than or equal 3 characters
                    </span>
                    <span v-if="!$v.username.maxLength">
                        User name will be less than or equal 20 characters
                    </span>
                    <span v-if="!$v.username.alphaNum">
                        Only alphabatic and number is allowed
                    </span>
                </div>
                <div v-else>
                    <div v-if="usernameStatus === 'checking'" class="text-info"> checking <i class="fa fa-spinner fa-spin"></i></div>
                    <div v-else-if="usernameStatus === 'error'" class="text-danger">
                        <span><i class="fa fa-warning"></i></span>
                    Username already exists</div>

                    <div v-else-if="username == ''"></div>
                    <div v-else><i class="fa fa-check text-success"></i></div>

                </div>
            </div>
        </div>

        <div class="form-group row">
            <label for="email" class="col-sm-3 col-form-label">Your Email address
                <span class="required-icon">*</span>
            </label>
            <div class="col-sm-6">
                <input type="text"
                v-model.trim="$v.email.$model"
                class="form-control"
                :class="{' is-invalid': $v.email.$error || emailStatus === 'error'}"
                id="email"
                name="email"
                placeholder="Write Your Email address">
            </div>
            <div class="col-sm-3">
                <div v-if="$v.email.$error" class="text-danger">
                    <span><i class="fa fa-warning"></i></span>
                    <span v-if="!$v.email.required"> Please give your email address</span>

                    <span v-if="!$v.email.email">
                       Please give a valid email address
                   </span>
               </div>
               <div v-else>
                <div v-if="emailStatus === 'checking'" class="text-info"> checking <i class="fa fa-spinner fa-spin"></i></div>
                <div v-else-if="emailStatus === 'error'" class="text-danger">
                    <span><i class="fa fa-warning"></i></span>
                email already exists</div>
                <div v-else-if="email == ''"></div>
                <div v-else><i class="fa fa-check text-success"></i></div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label for="phone_no" class="col-sm-3 col-form-label">Your Phone No
            <span class="required-icon">*</span>
        </label>
        <div class="col-sm-6">
            <input type="text"
            v-model.trim="$v.phone_no.$model"
            class="form-control"
            :class="{' is-invalid': $v.phone_no.$error || phoneStatus === 'error'}"
            id="phone_no"
            name="phone_no"
            placeholder="Write Your phone no">
        </div>
        <div class="col-sm-3">
            <div v-if="$v.phone_no.$error" class="text-danger">
                <span><i class="fa fa-warning"></i></span>
                <span v-if="!$v.phone_no.required"> Please give your phone no</span>

                <span v-if="!$v.phone_no.maxLength">
                   Please give a phone number between 14 characters
               </span>
           </div>
           <div v-else>
            <div v-if="phoneStatus === 'checking'" class="text-info"> checking <i class="fa fa-spinner fa-spin"></i></div>
            <div v-else-if="phoneStatus === 'error'" class="text-danger">
                <span><i class="fa fa-warning"></i></span>
            Phone no already exists</div>
            <div v-else-if="phone_no == ''"></div>
            <div v-else><i class="fa fa-check text-success"></i></div>
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="address" class="col-sm-3 col-form-label">Your Address
    </label>
    <div class="col-sm-6">
        <input type="text"
        v-model.trim="$v.address.$model"
        class="form-control"
        :class="{' is-invalid': $v.address.$error}"
        id="address"
        name="address"
        placeholder="Write Your Address">
    </div>
    <div class="col-sm-3">
        <div v-if="$v.address.$error" class="text-danger">
            <span><i class="fa fa-warning"></i></span>

            <span v-if="!$v.address.maxLength">
               Please give your address between 100 characters
           </span>
       </div>
       <div v-else-if="address == ''"></div>
       <div v-else>
        <i class="fa fa-check text-success"></i>
    </div>
</div>
</div>


<div class="form-group row">
    <label for="address" class="col-sm-3 col-form-label">Register as
    </label>
    <div class="col-sm-6">
        <select type="text"
        v-model.trim="$v.role.$model"
        class="form-control"
        :class="{' is-invalid': $v.role.$error}"
        id="role"
        name="role"
        placeholder="Choose your account type">
        <option value="">Choose your account type</option>
        <option value="0">User</option>
        <option value="1">Developer</option>
        <option value="2">Trainer</option>
        <option value="3">Trainee</option>
        <option value="4">Client</option>
    </select>
</div>
<div class="col-sm-3">

    <div v-if="$v.role.$error" class="text-danger">
        <span><i class="fa fa-warning"></i></span>

        <span v-if="!$v.role.required">
           Please choose your role
       </span>
   </div>

   <div v-else-if="role == ''"></div>
   <div v-else>
    <i class="fa fa-check text-success"></i>
</div>
</div>
</div>


<hr>

<div class="form-group row">
    <label for="password" class="col-sm-3 col-form-label">Password
        <span class="text-info">(optional)</span>
    </label>
    <div class="col-sm-6">
        <input type="password"
        v-model.trim="$v.password.$model"
        class="form-control"
        :class="{' is-invalid': $v.password.$error}"
        id="password"
        name="password"
        placeholder="Write Your password">
    </div>
    <div class="col-sm-3">
        <div v-if="$v.password.$error" class="text-danger">
            <span><i class="fa fa-warning"></i></span>

            <span v-if="!$v.password.minLength">
               Please give a password more than 6 characters characters
           </span>
       </div>
       <div v-else-if="password == ''"></div>
       <div v-else>
        <i class="fa fa-check text-success"></i>
    </div>
</div>
</div>
<div class="form-group row">
    <label for="confirm_password" class="col-sm-3 col-form-label">Confirm password
        <span class="text-info">(optional)</span>
    </label>
    <div class="col-sm-6">
        <input type="password"
        v-model.trim="$v.confirm_password.$model"
        class="form-control"
        :class="{' is-invalid': $v.confirm_password.$error}"
        id="confirm_password"
        name="confirm_password"
        placeholder="Confirm password">
    </div>
    <div class="col-sm-3">
        <div v-if="$v.confirm_password.$error" class="text-danger">
            <span><i class="fa fa-warning"></i></span>

            <span v-if="!$v.confirm_password.minLength">
               Please confirm password will be more than 6 characters characters
           </span>
           <span v-if="!$v.confirm_password.sameAs">
               Password combination doesn't match
           </span>
       </div>
       <div v-else-if="confirm_password == ''"></div>
       <div v-else>
        <i class="fa fa-check text-success"></i>
    </div>
</div>
</div>



<div class="form-group row">
  <div class="col-sm-10">
    <button v-if="submitStatus == 'PENDING'"  class="btn btn-info"> Signing Up... <i class="fa fa-spinner fa-spin"></i></button>
    <button v-else type="submit" class="btn btn-primary"> <i class="fa fa-check"></i> Sign Up</button>
</div>

</div>
</form>
</div>

</div>
</template>

<script>

    import { required, minLength, maxLength, alphaNum, email, url, numeric, sameAs } from 'vuelidate/lib/validators';
    export default {
        props: {
            url: {
                type: String,
                required: true
            },

        },
        mounted(){

        },

        data: function() {
            return {

                first_name : '',
                last_name : '',
                email : '',
                username : '',
                phone_no : '',
                address : '',
                role: '',
                password : '',
                confirm_password : '',

                submitStatus: null,
                usernameStatus: '',
                emailStatus: '',
                phoneStatus: '',
                serverErrors: []
            }
        },

        validations:
        {
            first_name: {
              required,
              minLength: minLength(3),
              maxLength: maxLength(20),
          },
          last_name: {
              minLength: minLength(3),
              maxLength: maxLength(15),
          },
          username: {
              required,
              minLength: minLength(3),
              maxLength: maxLength(30),
              alphaNum
          },
          email: {
              required,
              email
          },
          phone_no: {
              required,
              maxLength: maxLength(14)
          },
          address: {
              maxLength: maxLength(100)
          },
          role: {
              required
          },
          password: {
            minLength: minLength(6)
        },
        confirm_password: {
            minLength: minLength(6),
            sameAsPassword: sameAs('password')
        },


    },

    methods: {

      submitForm() {
        let vm = this;
        vm.$v.$touch()
        if (vm.$v.$invalid) {
            vm.submitStatus = 'ERROR';
        } else {
        // do your submit logic here
        vm.submitStatus = 'PENDING';

        // Now submit data to server

        axios.post(vm.url + '/api/developers/register', {
            developer: vm.developer,

            // Pass developer data's
            first_name: vm.first_name,
            last_name: vm.last_name,
            email: vm.email,
            phone_no: vm.phone_no,
            username: vm.username,
            address: vm.address,
            role: vm.role,
            password: vm.password,
            confirm_password: vm.confirm_password

        }).then(function (response){
            console.log(response)

            if (response.data.status) {

                vm.submitStatus = 'OK';
                console.log(response.data);

            }else {
                vm.submitStatus = 'ERROR';
                vm.serverErrors = error.response.data.errors;
                console.log(vm.serverErrors);

            }
        }).catch(function (error){
            // vm.serverErrors = response.data.errors;
            vm.submitStatus = 'ERROR';
            vm.serverErrors = error.response.data.errors;
            console.log(vm.serverErrors);


        });

    }

},

},

watch: {

    email: _.debounce(function() {

        let vm = this;
        vm.emailStatus = 'checking';
            // Send it to server and check
            if (vm.email) {
                axios.get(vm.url + '/api/developers/email-check', {
                    params: {
                        email: vm.email
                    }
                }).then(function (response){
                    // If unique, set the slug else refactor it and make unique
                    if (response.data) {
                    // It's unique
                    vm.emailStatus = 'ok';
                }else {
                     // It's not unique
                     vm.emailStatus = 'error';
                 }
             }).catch(function (error){
                console.log(error);
            });
         }
     }, 100),


    username: _.debounce(function() {

     let vm = this;
     vm.usernameStatus = 'checking';
     // Send it to server and check
     axios.get(vm.url + '/api/developers/username-check', {
        params: {
            username: vm.username
        }
    }).then(function (response){
            // If unique, set the slug else refactor it and make unique
            if (response.data) {
            // It's unique
            vm.usernameStatus = 'ok';
        }else {
             // It's not unique
             vm.usernameStatus = 'error';
         }
     }).catch(function (error){
        console.log(error);
    });
 }, 100),


    phone_no: _.debounce(function() {

     let vm = this;
     vm.phoneStatus = 'checking';
            // Send it to server and check
            if (vm.phone_no) {
                axios.get(vm.url + '/api/developers/phone-check', {
                    params: {
                        phone_no: vm.phone_no
                    }
                }).then(function (response){
                    // If unique, set the slug else refactor it and make unique
                    if (response.data) {
                    // It's unique
                    vm.phoneStatus = 'ok';
                }else {
                     // It's not unique
                     vm.phoneStatus = 'error';
                 }
             }).catch(function (error){
                console.log(error);
            });
         }
     }, 100),

    submit_status: _.debounce(function() {

     if (submit_status == "OK") {
        this.first_name  = '',
        this.last_name  = '',
        this.email  = '',
        this.username  = '',
        this.phone_no  = '',
        this.address  = '',
        this.role = '',
        this.password  = '',
        this.confirm_password  = '',
        this.usernameStatus = '',
        this.emailStatus = '',
        this.phoneStatus = '',
        this.serverErrors = []
    }
}, 100),

}

}

</script>


/*********** ProfilePictureChange.vue **********/
<style scoped>
img{
    max-width: 150px;
    border: 1px solid;
    margin: 5px;
}
input.form-control {
    background: #b8c3c9;
    padding: 3px;
    border: 0px;
}
</style>

<template>
    <div class="profile-picture-change-widget mt-2">
        <div>

            <input type="file" @change="onImageChange" class="form-control" size="60">
            <br>
            <div v-if="image_loaded">
                <img :src="image">
            </div>
            <br>

            <button class="btn btn-success mt-2" @click.prevent="updateProfilePicture" v-if="image_loaded && !is_uploading && !is_uploaded">
                <i class="fa fa-check"></i> Update Profile Picture
            </button>
            <button class="btn btn-success mt-2" v-if="is_uploading">
                <i class="fa fa-check"></i> Uploading ...
            </button>
            <button class="btn btn-info mt-2" v-if="is_uploaded">
                <i class="fa fa-check"></i> Uploaded Successfully
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            },
            api_token: {
                type: String
            }
        },
        mounted(){

        },

        data: function() {
            return {
                image: '',
                image_loaded: false,
                is_uploading: false,
                is_uploaded: false
            }
        },
        methods: {
            onImageChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                this.createImage(files[0]); // Files the image / file value
            },
            createImage(file) {
                // Preview Image before upload
                var image = new Image;
                var reader = new FileReader();
                reader.onload = (e) => {
                    this.image = e.target.result;
                };
                reader.readAsDataURL(file);
                this.image_loaded = true;
            },
            updateProfilePicture() {
                let vm = this;
                // Upload image to database
                vm.is_uploading = true;

                if (vm.api_token && vm.image) {
                    axios.post(vm.url + '/api/developers/profile-picture-change', {
                        api_token: vm.api_token,
                        image: vm.image
                    }).then(function (response){
                        if (response.data) {
                         console.log(response.data);
                         vm.is_uploading = false;
                         vm.is_uploaded = true;
                     }else {
                         console.log(response.data);
                     }
                 }).catch(function (error){
                    console.log(error);
                });
             }
         },
         cancelImage() {
            this.image = ""
        }
    },

    watch: {
        is_uploaded: _.debounce(function() {

            if (this.is_uploaded === true) {
                window.location.href = this.url + '/developer';
            }

        }, 500),
    }

}
</script>


/************ Comment Box ************/
<template>
  <div class="mt-5 wow fadeInUp">
    <h4 class="mb-3">Leave a Comment</h4>
    <div class="row">
      <div class="col-md-10">
        <div class="form-group">
          <textarea class="form-control mb-10" rows="1" id="message" v-model="message" placeholder="Comment" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Comment'" required></textarea>
        </div>
      </div>
      <div class="col-md-2">
        <button @click="saveComment" class="btn btn-primary text-uppercase">Post</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    user_id: {
      type: Number
    },
    developer_id: {
      type: String
    },
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    saveComment(){
      axios.post(this.url+'/tutorial/comment/add', {
        message: this.message,
        tutorial_id: this.id,
        developer_id: this.developer_id
      })
      .then((response) => {
        this.message = '';
        this.$emit('newComment', response.data);
      })
      .catch((e) => {
        console.log(e);
      })
    }
  },
  mounted() {
    var vm = this;
    tinymce.init({
      selector:'#message' ,
      plugins: 'codesample code print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
      toolbar: 'codesample bold italic | autolink | link | preview code',
      image_advtab: true,
      menubar:false,
      setup: function(editor){
        editor.on('keyup', function(e){
          console.log('enter');
          vm.model = editor.getContent();
          vm.message = editor.getContent();
        })
      }
    });
  }
}
</script>


/********* Comment.js ***********/
<template>
  <div class="comment">
    <div class="comments-area">
      <h4 class="wow fadeIn">{{ length }} Comments</h4>
      <div class="comment-list" v-for="comment in comments" v-if="!comment.replier_comment_id">
        <div class="single-comment justify-content-between d-flex">
          <div class="user justify-content-between d-flex wow slideInLeft">
            <div class="thumb">
              <img :src="url+'/public/website-images/developers/'+comment.developer.image" alt="" width="30" height="30">
            </div>
            <div class="desc">
              <h5><a href="#">{{ comment.developer.first_name }} {{ comment.developer.last_name }}</a></h5>
              <p class="date">{{ comment.created_at }}</p>
              <div class="comment" v-html="comment.comment"></div>
            </div>
          </div>
          <CommentReply :comment="comment" :comments="comments" @replies="tutorialReplies"></CommentReply>
        </div>
        <div class="replies">
          <div class="comment-list left-padding">
            <div class="single-comment justify-content-between d-flex" v-for="thisReply in thisReplies" v-if="thisReply.replier_comment_id == comment.id">
              <div class="user justify-content-between d-flex">
                <div class="thumb">
                  <img src="img/blog/c2.jpg" alt="">
                </div>
                <div class="desc">
                  <h5><a href="#">{{ thisReply.developer.first_name }} {{ thisReply.developer.last_name }}</a></h5>
                  <p class="date">{{ thisReply.created_at }} </p>
                  <p class="comment">
                    {{ thisReply.comment }}
                  </p>
                </div>
              </div>
            </div>
            <div v-if="replyBox">
              <div v-if="comment.id == comment_id_for_reply">
                <div v-if="user">
                  <ReplyBox :tutorial_id="id" :comment="comment" :developer_id="developer_id" :url="url" @newReply="pushNewReply"></ReplyBox>
                </div>
                <div v-else>
                  <div class="alert alert-danger" role="alert">
                    Please Sign in for comment
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="user">
      <CommentBox :id="id" :user_id="user.id" :developer_id="developer_id" :url="url" @newComment="pushNewComment"></CommentBox>
    </div>
    <div v-else>
      <div class="alert">
        <div class="alert alert-danger" role="alert">
          Please Sign in for comment
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommentBox from "./CommentBox.vue";
import CommentReply from "./CommentReply.vue";
import ReplyBox from "./ReplyBox.vue";

export default {
  props: {
    id: {
      type: String,
      required: true
    },
    user: {
      type: Object
    },
    developer_id: {
      type: String
    },
    url: {
      type: String,
      required: true
    }
  },
  data(){
    return {
      comments: [],
      thisReplies: [],
      replyBox: false,
      comment_id_for_reply: '',
      length: ''
    }
  },
  methods: {
    pushNewComment(newComment){
      this.comments.push(newComment);
      this.length++;
    },
    tutorialReplies(replies, comment_id){
      this.comment_id_for_reply = comment_id;
      this.replyBox = true;
      this.thisReplies = [];
      if(replies.length > 0){
        this.thisReplies = replies;
      }
    },
    pushNewReply(reply){
      this.thisReplies.push(reply);
      this.length++;
    }
  },
  mounted() {
    axios.get(this.url+'/tutorial/comments/'+this.id)
    .then((response) => {
      this.comments = response.data;
      this.length = this.comments.length;
    })
    .catch((e) => {
      console.log(e);
    })
  },
  computed: {

  },
  components: {
    CommentBox,
    CommentReply,
    ReplyBox
  }
}
</script>


/*********** Comment Reply *********/
<template>
  <div class="reply-btn wow slideInRight">
    <button class="btn btn-primary btn-sm" @click="allReply">{{ commentReply(comment.id) }} Reply</button>
  </div>
</template>

<script>
export default {
  props: {
    comment: {
      type: Object,
      required: true
    },
    comments: {
      type: Array,
      required: true
    }
  },
  data(){
    return {
      replies: [],
      totalReply: 0
    }
  },
  methods: {
    allReply(){
      var app = this;
      app.replies = [];
      app.comments.forEach(function(c) {
        if(c.replier_comment_id === app.comment.id){
          app.replies.push(c);
        }
      });
      app.$emit('replies', app.replies, app.comment.id);
    },
    commentReply(id){
      var app = this;
      var total = 0;
      app.comments.forEach(function(c) {
        if(c.replier_comment_id === id){
          total++;
        }
      });

      return app.totalReply = total;
    }
  },
  mounted() {

  }
}
</script>


/********* Reply Box *********/
<template>
  <div class="row">
    <div class="col-md-10">
      <div class="form-group">
        <textarea class="form-control mb-10" rows="1" id="reply_comment" @keydown.enter="saveReply" v-model="reply_comment" placeholder="Reply" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Comment'" required></textarea>
      </div>
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary" @click="saveReply">Post</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    comment: {
      type: Object,
      required: true
    },
    tutorial_id: {
      type: String,
      required: true
    },
    developer_id: {
      type: String
    },
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      reply_comment: ''
    }
  },
  methods:  {
    saveReply(){
      axios.post(this.url+'/tutorial/comment/reply', {
        reply_comment: this.reply_comment,
        replier_comment_id: this.comment.id,
        tutorial_id: this.tutorial_id,
        developer_id: this.developer_id
      })
      .then((response) => {
        this.reply_comment = '';
        this.$emit('newReply', response.data);
      })
      .catch((e) => {
        console.log(e);
      })
    }
  },
  mounted() {

  }
}
</script>


/***** Draggable Tutorial ******/
<style scoped>
.playlist-tutorials{
  cursor: pointer;
}
.handleDrag{
  cursor: move;
}
#order-change-message{
  color: #e04006!important;
  letter-spacing: 1px;
  padding: 5px;
  padding-left: 10px;
  background: aquamarine;
}
</style>

<template>
  <div class="playlist-tutorials-widget mt-2">
    <div v-if="!is_loaded" class="text-center">
      <p class="">Loading Tutorials ...</p>
      <p class=""><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
        <span class="sr-only">Loading...</span> </p>
      </div>
      <div v-else>
        <p v-if="is_order_changed" id="order-change-message"><i class="fa fa-check"></i> Tutorials Order has changed</p>
        <draggable :list="posts" :options="{animation:200, handle: '.handleDrag'}" element="div" class="playlist-tutorials" @change="updateOrder">

          <div class="card card-body p-2 m-2" v-for="(post, index) in posts">
            <div class="row">
              <div class="col-sm-2">

                <div v-if="post.featured_image">
                  {{ index+1 }}) <img :src="url+'/public/website-images/posts/'+post.featured_image" width="25px">
                </div>
                <div v-else>
                  {{ index+1 }}) <i class="fa fa-check bold"></i>
                </div>

              </div>
              <div class="col-sm-6">
                {{ post.title }}
              </div>
              <!-- <div class="col-sm-2">
                {{ post.priority }}
              </div> -->
              <div class="col-sm-2 handleDrag">
                <i class="fa fa-arrows"></i>
              </div>
            </div>
          </div> <!-- Single Post -->


        </draggable :list="posts">
      </div>
    </div>
  </template>

  <script>
    import draggable from 'vuedraggable';
    export default {
      components: {
        draggable
      },
      props: {
        url: {
          type: String,
          required: true
        },
        playlist_slug: {
          type: String,
          required: true
        },
        api_token: {
          type: String,
          required: true
        }
      },

      data: function() {
        return {
          is_loaded: false,
          posts: [],
          is_order_changed: false
        }
      },

      mounted(){
        let vm = this;
        vm.is_loaded = false;
        if (vm.api_token && vm.playlist_slug) {
          axios.get(vm.url + '/api/playlists/get-tutorials/', {
            params: {
              api_token: vm.api_token,
              slug: vm.playlist_slug
            }
          }).then(function (response){
            if (response.data) {
              vm.posts = response.data.posts;
              vm.is_loaded = true;
            }else {
              // vm.is_loaded = true;
            }
          }).catch(function (error){
            console.log(error);
          });


        }
      },

      methods: {
        updateOrder(){
          console.log('Updating order...');

          let vm = this;
          vm.posts.map((post, index) => {
            post.priority = index + 1;
          });

          // Send it to server and update it as a permanent

          if (vm.api_token && vm.playlist_slug) {
            axios.post(vm.url + '/api/playlists/update-tutorials-order', {
              api_token: vm.api_token,
              slug: vm.playlist_slug,
              posts: this.posts
            }).then(function (response){
              if (response.data) {
                // console.log(response.data.status);
                vm.is_order_changed = true;
              }else {
              // vm.is_loaded = true;
            }
          }).catch(function (error){
            console.log(error);
          });
        }

      }
    },
    watch: {
     is_order_changed: _.debounce(function() {
      if (this.is_order_changed) this.is_order_changed = false;
    }, 3000)
   }
 }
</script>


/****** PlaylistSlugChecker ****/
<style scoped>

</style>

<template>
    <div class="slug-widget mt-2">
        <i class="fa fa-link"></i>
        {{ url }}/{{ username }}/playlists/
        <input type="text" name="slug" v-model="slug" @keyup="checkPlaylistSlug">

        <span class="slugStatus text-success" v-if="slug_status">
            <i class="fa fa-check"></i> Available
        </span>
        <span class="slugStatus text-center text-danger" v-else>
            <i class="fa fa-close"></i> Not Available
            <br />
            <span v-if="slug_message" v-html="slug_message"></span>
        </span>
    </div>
</template>

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            },
            username: {
                type: String,
                required: true
            },
            old_slug: {
                type: String,
                required: true
            },
            api_token: {
                type: String,
                required: true
            }
        },
        mounted(){

        },

        data: function() {
            return {
               slug: this.old_slug,
               slug_status: true,
               slug_message: ''
           }
       },
       methods: {
        checkPlaylistSlug(){
        // Get the slug
        let slug = this.slug;

        // Send the slug to the server and get response
        let vm = this;

        if (vm.api_token && slug) {
            // Test to see if the URL is unique or not
            axios.get(vm.url+'/api/playlists/check-unique/', {
              params: {
                api_token: vm.api_token,
                slug: slug
              }
            }).then(function (response){
              // If unique, set the slug else refactor it and make unique
              console.log(response.data)
              if (response.data.slug_available == 1) {
                // It's unique
                vm.slug_status = true;
                vm.slug_message = response.data.message;
              }else {
                  // It's not unique and customize the slug
                  if (vm.slug == vm.old_slug) {
                    vm.slug_status = true;
                    vm.slug_message = '';
                  }else {
                    vm.slug_status = false;
                    vm.slug_message = response.data.message;
                  }


                }
              }).catch(function (error){
                console.log(error);
              });
            }

          }

       },
       watch: {

       }
   }
</script>


/****** Search Tutorial **********/
<style scoped>
.tutorial-search-bar{
    max-height: 250px;
    position: absolute;
    overflow-y: auto;
    margin-top: 42px;
    width: 272px;
    background: #f9f1f3;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    box-shadow: 2px 5px 34px -5px #34354a;
}
</style>

<template>
    <div class="search-tutorial-widget mt-2">
        <input placeholder="Search Tutorials" name="search" type="text" @focus="searchTutorial"  v-model="searchText" id="searchTutorialInput" v-on:keyup="searchTutorial()">
        <button type="submit"><i class="fa fa-search"></i></button>

        <div class="tutorial-search-bar" v-if="searchStarted">
            <div v-if="loading" class="text-center">
                <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw""></i>
            </div>
            <p class="dropdown-item pointer" v-for="tutorial in tutorials" @click="goTutorial(tutorial.slug)" >
                {{ tutorial.title }}
            </p>
            <div v-if="tutorials.length == 0">
                <p class="text-danger m-2"> No tutorials found by your search...</p>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            }
        },
        data: function() {
            return {
                searchText: '',
                searchStarted: false,
                loading: true,
                tutorials: []
            }
        },
        methods: {
         searchTutorial: function(){
          if (this.searchText.length > 0) {
            this.loading = true;
            this.searchStarted = true;
            $('.tutorial-search-bar').show('slow');
        }else{
            this.searchStarted = false
            $('.tutorial-search-bar').hide('slow');
        }

        // Send it to the server and get the related tutorials
        var vm = this;
        if (vm.searchStarted) {
            axios.get(vm.url+ '/api/tutorials/search/'+vm.searchText)
            .then(response => {
                vm.tutorials = response.data;
                vm.loading = false;
            }).catch(function (error){
            })
        }
    },
    focusOut: function(){
        this.searchStarted = false;
    },
    goTutorial: function(val){
        window.location.href = this.url + "/tutorials/search/" + val;
    }
},

}

</script>


/******* SlugWidget.vue *************/
<style scoped>
.slug-widget{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrapper{
    margin-left: 8px;
}
.url-wrapper{
    height: 30px;
    display: flex;
    align-items: center;
}

.slug{
    background-color: #fcffcd;
    /*padding: 3px;*/
}
.input{
    width: auto;
}

</style>

<template>
    <div class="slug-widget mt-2">
        <div class="icon-wrapper wrapper">
            <i class="fa fa-link"></i>
        </div>
        <div class="url-wrapper wrapper">
            <span class="root-url">{{ url }}</span>
            <span class="subdirectory-url">/{{ subdirectory }}/</span>
            <span class="slug" v-show="slug && !isEditing">{{ slug }}</span>
            <input type="text" name="slug-edit" class="input small" @existing-slug="existingSlug" v-show="isEditing" v-model="customSlug">
        </div>
        <div class="slug-checker">
            <p></p>
        </div>
        <div class="button-wrapper wrapper">
            <button type="button" class="btn btn-sm btn-default" v-show="!isEditing" @click.prevent="editSlug">Edit</button>
            <button type="button" class="btn btn-sm btn-default" v-show="isEditing" @click.prevent="saveSlug">Save</button>
            <button type="button" class="btn btn-sm btn-default" v-show="isEditing" @click.prevent="resetSlug">Reset</button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            },
            subdirectory: {
                type: String,
                required: true
            },
            title: {
                type: String,
                required: true
            },
            prevSlug: {
                type: String,
                default: ''
            }
        },
        mounted(){
            // if(this.prevSlug != NULL)
            // {
            //     this.slug = this.prevSlug;
            // }
            console.log(this.prevSlug)
            if(this.prevSlug){
                this.customSlug = this.prevSlug;
            }else {
                this.customSlug = this.slug;
                this.setSlug(this.title)
            }

        },

        data: function() {
            return {
                slug: this.setSlug(this.title),
                customSlug: '',
                isEditing: false,
                wasEdited: false,
                api_token: this.$root.api_token
            }
        },
        methods: {
            editSlug: function() {
                this.customSlug = this.slug;
                this.$emit('edit', this.slug);
                this.isEditing = true;
            },
            saveSlug: function() {

                if (this.customSlug !== this.slug) {
                    this.wasEdited = true;
                }
                this.setSlug(this.customSlug)

                this.$emit('save', this.slug);
                this.isEditing = false;
            },

            resetSlug: function() {
                this.setSlug(this.title)
                this.$emit('reset', this.slug);
                this.wasEdited = false;
                this.isEditing = false;
            },

            setSlug: function (newVal, count = 0) {
                // Slugify the URL
                let slug = Slug(newVal + (count > 0 ? `-${count}` : ''));
                let vm = this;

                if (vm.api_token && slug) {
                    // Test to see if the URL is unique or not
                    axios.get(this.url + '/api/posts/unique', {
                        params: {
                            api_token: vm.api_token,
                            slug: slug
                        }
                    }).then(function (response){
                    // If unique, set the slug else refactor it and make unique
                    if (response.data) {
                        // It's unique
                        vm.slug = slug;
                        vm.$emit('slug-changed', slug);
                    }else {
                        // It's not unique and customize the slug
                        vm.setSlug(newVal, count+1)

                    }
                }).catch(function (error){
                    console.log(error);
                });
            }

        },

        existingSlug: function(val) {
            this.setSlug(val)
        }
    },
    watch: {
        title: _.debounce(function() {

            if (this.wasEdited === false) {
                this.setSlug(this.title)
            }

                // this.slug = this.convertTitle();
            }, 500),
            // slug: function(val) {
            //     this.$emit('slug-changed', val);
            // }
        }
    }
</script>