@extends('layouts.backend')

@section('extra_css')
    <meta name="token" id="token" value="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('assets/css/custom.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/google-code-prettify/bin/prettify.min.css') }}">
@endsection


@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>Category Manage</h3>
                </div>

                <div class="title_right">
                    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for...">
                            <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="row" id="manage-category">
                <div class="col-md-5 col-sm-12 col-xs-12">

                    @if (Session::get('message'))
                        <div id="message">
                            @{{{ message }}}
                        </div>
                    @endif


                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Create New Category <small>Please fill up this form carefully</small></h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">

                            <br />
                            <form v-on:submit="addNewCategory" id="create_category" method="post" action="#" data-parsley-validate="" class="form-horizontal form-label-left" novalidate="">
                                {{ csrf_field() }}
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input v-model="newCategory.name" type="text" id="name" name="name" required="required" class="form-control col-md-7 col-xs-12">
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="slug">slug <span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input v-model="newCategory.slug" type="text" id="slug" name="slug" required="required" class="form-control col-md-7 col-xs-12">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="slug">position<span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input v-model="newCategory.position" type="text" id="position" name="position" required="required" class="form-control col-md-7 col-xs-12">
                                    </div>
                                </div>

                                <div class="ln_solid" v-show="newCategory.name"></div>
                                <div class="form-group" v-show="newCategory.name">
                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">

                                        <button v-if="!edit" type="submit" class="btn btn-success submit">Add New Category</button>
                                        <button v-if="edit" @click="EditCategory(newCategory.id)"  type="submit" class="btn btn-success submit">Update Category</button>
                                    </div>
                                </div>

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


                <div class="col-md-7 col-sm-6 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>All Categories <small>manage your category</small></h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">

                            <table class="table table-bordered" id="category_table">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Slug</th>
                                    <th>position</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr v-for="category in categories">
                                    <td>@{{ category.id }}</td>
                                    <td>@{{ category.name }}</td>
                                    <td>@{{ category.slug }}</td>
                                    <td>@{{ category.position }}</td>
                                                                        <td>
                                        <div class="btn-group" role="group" aria-label="...">
                                            <a target="_blank" href="{{ url('/topic')}}/@{{category.slug }}" class="category_edit btn btn-info"><i class="fa fa-eye"></i></a>
                                            <button @click="ShowCategory(category.id)" class="category_edit btn btn-warning"><i class="fa fa-edit"></i></button>
                                            <button @click="DeleteCategory(category.id)" id="category_delete" class="btn btn-danger"><i class="fa fa-close"></i></button>

                                        </div>

                                    </td>
                                </tr>

                                </tbody>
                            </table>

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


    <!-- Trigger the modal with a button -->

@endsection

@section('extra_js')
    <script src="{{ asset('assets/vendors/parsleyjs/dist/parsley.min.js') }}"></script>
    <script>
        new Vue({
            http: {
                root: '/root',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('#token').getAttribute('value')
                }
            },

            el : '#manage-category',
            data: {
                categories : [],
                newCategory : {
                    id : '',
                    name : '',
                    slug : '',
                    position: ''
                },
                message : '',
                CategoryEditUrl : $(this).data('route'),
                edit    : false

            },

            methods : {
                fetchCategory : function () {
                    this.$http.get('{{ route('category.index') }}').then((response) => {


                    // set data on vm
                    this.$set('categories', response.body);

                })
                },

                addNewCategory : function (e) {
                    var category = this.newCategory;

                    this.newCategory = { name : '', slug : '', position: ''};

                    this.$http.post('{{ route('category.store') }}', category).then((response) => {

                        // set data on vm
                        this.$set('message', response.body);
                        this.fetchCategory();
                })





                    e.preventDefault();
                },

                ShowCategory : function (id) {
                    this.edit = true;

                    this.$http.get('{{ route('category.index') }}' + '/' + id+ '/edit').then((response) => {

                        // set data on vm
                        this.$set('newCategory', response.body);
                    })

                },
                EditCategory : function (id) {
                    this.$http.patch('{{ route('category.index') }}' + '/' + id, {name : this.newCategory.name, slug : this.newCategory.slug, position :this.newCategory.position} ).then((response) => {
                        this.newCategory = { name : '', slug : '', position : ''};
                        this.message = '';

                        this.$set('message', response.body);

                        this.fetchCategory();

                })
                    this.edit = false;

                },
                DeleteCategory : function (id) {
                    var conformBox = confirm("Are you sure?, you want to delete this category?");

                    if(conformBox) this.$http.delete('{{ route('category.index') }}' + '/' + id).then((response) => {
                        this.$set('message', response.body);
                        this.fetchCategory();
                        this.newCategory = { name : '', slug : '', position : ''};
                    })
                },
                test : function () {
                    alert(this.message);
                }
            },
            ready : function () {
                this.fetchCategory();

            },



        });


    </script>
@endsection