@extends('layouts.app')
@section('content')
<div id="users">
    <section class="login-area roster-page">
      <div class="rooster container">
        <a class="btn btn-success mb-2 rooster-btn" href="{{url('')}}/manage/blog/create">Create</a>
      </div>
        <div class="container">
    <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Date</th>
        <th>Action<th>
      </tr>
    </thead>
    <tbody>
        <tr v-for="blog in blogData">
            <td v-text="blog.title"></td>
            <td v-text="convertDate(blog.created_at)"></td>
            <td> <a :href="'/manage/blog/edit/'+blog.id">Edit</a> | <a href="javascript:;" v-text="blog.status == 1 ? 'Deactivate' : 'Active'"  @click="blogStatusUpdate(blog.status,blog.id)"></a> | <a :href="'/blog/'+blog.id">View</a></td>
          </tr>
    </tbody>
    </table>
  </div>
  </section>

<section class="create-acount-popup">
    <div class="modal modalWindow fade" id="viewUser" 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" v-if="usersDetail !== null">
                    {{-- <div class="user-imge">
                        <img src="{{asset('img/create-acount-img.png')}}" class="img-fluid">
                        <h1  v-text="usersDetail.name">Fighter Name</h1>
                    </div> --}}
                      <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)">
                          <!--hidden required values-->
                          <div class="mm-field">
                                <input type="text" v-model="userName" placeholder="User Name"/>
                          </div>
                          <div class="mm-field">
                            <input type="text" v-model="userEmail"  placeholder="Email"/>
                          </div>
                          <div class="created-list-btn-option">
                                <select class="classic">
                                    <option>Active</option>
                                    <option>Deactivate</option>
                                </select>
                          </div>
                          <div class="input-btn">
                            <button type="submit" id="signupBtn" value="1" name="signupForm" @click="updateUser">
                                 Submit
                            </button>
                          </div>
                        </form>
                        <a class="closeBtn" data-dismiss="modal" aria-label="Close" > CLOSE X</a>
                      </div>
                </div>
            </div>
        </div>
    </div>
  </section>

  <section class="create-acount-popup">
    <div class="modal modalWindow fade" id="createUserModal" tabindex="-1"  role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modalWrapper">
                    {{-- <div class="user-imge">
                        <img src="{{asset('img/create-acount-img.png')}}" class="img-fluid">
                        <h1  v-text="usersDetail.name">Fighter Name</h1>
                    </div> --}}
                      <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)">
                          <!--hidden required values-->
                          <div class="mm-field">
                                <input type="text" v-model="userName" placeholder="User Name"/>
                          </div>
                          <div class="mm-field">
                            <input type="text" v-model="userEmail"  placeholder="Email"/>
                          </div>
                          <div class="mm-field">
                            <input type="password" v-model="password" placeholder="Password"/>
                          </div>
                          <div class="mm-field">
                            <input type="password" v-model="password_confirmation" placeholder="Confirm Password"/>
                          </div>
                          <div class="input-btn">
                            <button type="submit" id="signupBtn" value="1" name="signupForm" @click="storeUser">
                                 Submit
                            </button>
                          </div>
                        </form>
                        <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: {
                    usersData: [],
                    usersDetail: null,
                    userName : null,
                    userEmail: null,
                    userId:null,
                    name: this.userName,
                    email: this.userEmail,
                    password: this.password,
                    password_confirmation: this.password_confirmation,
                    blogData:[]
                },
                mounted: function () {
                    this.getBlogs();
                },
                methods: {
                  blogStatusUpdate: function (status,id){
                    
                    _ajax.post('{{env("APP_URL")}}/blog/status/update', { status : status, id : id}, (res) => {
                                if (res.status) {

                                }
                            });


                  },
                  getBlogs: function () {
                        _ajax.post('{{env("APP_URL")}}/get/all-blog', {}, (res) => {
                                if (res.status) {
                                    this.blogData = res.data
                                }
                            });
                        },
                   userEdit: function (id) {
                        _ajax.post('{{env("APP_URL")}}/get/users/'+id, {}, (res) => {
                                if (res.status) {
                                    this.usersDetail = res.data
                                    this.userName  = res.data.name
                                    this.userEmail = res.data.email
                                    this.userId = res.data.id
                                    $('#viewUser').modal('show');
                                }
                            });
                        },
                    updateUser: function () {
                        var data = {
                                    user_id : this.userId,
                                    user_name : this.userName,
                                    user_email : this.userEmail
                                }


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

                                if (res.status) {
                                    this.usersDetail = null
                                    this.userName  = null
                                    this.userEmail = null
                                    $('#viewUser').modal('hide');
                                    Swal.fire(
                                        'Good job!',
                                        'You clicked the button!',
                                        'success'
                                    )
                                }
                                else{
                                    $('#viewUser').modal('hide');
                                    Swal.fire(
                                        'Oops...',
                                        'Something went wrong!',
                                        'error'
                                    );
                                }
                            });
                        },
                    createUser: function () {
                        //   $('#createUserModal').modal('show');
                    },
                    storeUser: function () {
                        var data = {
                                    name: this.userName,
                                    email: this.userEmail,
                                    password: this.password,
                                    password_confirmation: this.password_confirmation
                                }

                        _ajax.post('{{env("APP_URL")}}/user/register', data, (res) => {
                                if (res.status) {
                                    this.userName = null
                                    this.userEmail = null
                                    this.password = null
                                    this.password_confirmation = null
                                    $('#createUserModal').modal('hide');
                                }
                            });
                    },
                    convertDate: function(created_at){

                        var date = moment(created_at).format('DD-MMM-YY');
                        return date;
                    }
                }
              }).$mount("#users");
  </script>
@endsection