@extends('layouts.app')

@section('title', 'Users')

@section('content')
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->

<div id="content" class="container">
    <div class="row">
        <div>
            <div class="panel panel-default">
                <div class="panel-heading"><h2>Users</h2></div>

                <div class="panel-body">
                <div id="users">
                    <hr>
                    <div class="row no-print">
                        <div class="col-md-7 form-inline">
                            <div class="form-inline form-group">
                                <label>Search:</label>
                                <input v-model="searchFor" class="form-control" @keyup.enter="setFilter">
                                <button class="btn btn-primary" @click="setFilter">Go</button>
                                <button class="btn btn-default" @click="resetFilter">Reset</button>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-inline form-group pull-right">
                                <button class="btn btn-default" data-toggle="modal" data-target="#settingsModal">
                                    <span class="glyphicon glyphicon-cog"></span> Settings
                                </button>
                                <a href="{{ route('users.export') }}" class="btn btn-info"> <span class="glyphicon glyphicon-list-alt"></span> Export to CSV</a>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="settingsModal" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span>&times;</span>
                                    </button>
                                    <h4 class="modal-title">Settings</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" v-model="multiSort"> Multisort (use Alt+Click)
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Pagination:</label>
                                        <select class="form-control" v-model="paginationComponent">
                                            <option value="vuetable-pagination">vuetable-pagination</option>
                                            <option value="vuetable-pagination-dropdown">vuetable-pagination-dropdown</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Per Page:</label>
                                        <select class="form-control" v-model="perPage">
                                            <option value=10>10</option>
                                            <option value=15>15</option>
                                            <option value=20>20</option>
                                            <option value=25>25</option>
                                            <option value=100>100</option>
                                            <option value=500>500</option>
                                            <option value='{{ App\User::all()->count() }}'>All</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">Visible fields</h4>
                                            </div>
                                            <div class="panel-body">
                                                <div class="checkbox" v-for="field in fields">
                                                    <label>
                                                        <input type="checkbox" v-model="field.visible">
                                                        @{{ field.title == '' ? field.name.replace('__', '') : field.title | capitalize }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <vuetable v-ref:vuetable
                            api-url="{{ route('users.list_json') }}"
                            pagination-path=""
                            :fields="fields"
                            :sort-order="sortOrder"
                            :multi-sort="multiSort"
                            table-class="table table-bordered table-striped table-hover"
                            ascending-icon="glyphicon glyphicon-chevron-up"
                            descending-icon="glyphicon glyphicon-chevron-down"
                            pagination-class=""
                            pagination-info-class=""
                            pagination-component-class=""
                            :pagination-component="paginationComponent"
                            :item-actions="itemActions"
                            :append-params="moreParams"
                            :per-page="perPage"
                            wrapper-class="vuetable-wrapper"
                            table-wrapper=".vuetable-wrapper"
                            loading-class="loading"
                            detail-row-component="my-detail-row"
                            detail-row-id="id"
                            detail-row-transition="expand"
                            row-class-callback="rowClassCB"
                        ></vuetable>
                    </div>
                    <hr><!-- /app -->
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/vue/1.0.28/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue.table/1.5.3/vue-table.min.js"></script>
<script>
var E_SERVER_ERROR = 'Error communicating with the server'

// fields definition
var tableColumns = [
    {
        name: 'id',
        title: '',
        dataClass: 'text-center',
        callback: 'showDetailRow'
    },
    {
        name: 'id',
        sortField: 'id',
    },
    {
        name: 'first_name',
        title: 'First Name',
        sortField: 'first_name',
    },
    {
        name: 'last_name',
        title: 'Last Name',
        sortField: 'last_name',
    },
    {
        name: 'email',
        title: 'Email Address',
        sortField: 'email',
    },
    {
        name: 'agency',
        title: 'Agency',
        sortField: 'agency',
    },
    {
        name: 'last_login',
        title: 'Last Login',
        sortField: 'last_login',
    },
    {
        name: 'attempts',
        title: "Completed all {{ $assessments->count() }} modules?",
        dataClass: 'text-center',
        callback: 'completed_all',
    },
    {
        name: 'attempts',
        title: "Modules Passed",
        dataClass: 'text-center',
        callback: 'completed',
    },
    {
        name: 'status',
        sortField: 'status',
        callback: 'showStatus'
    },
    {
        name: 'admin',
        title: "Admin?",
        dataClass: 'text-center',
        callback: 'checkAdmin',
        sortField: 'admin',
    },
    {
        name: '__actions',
        title: "Actions",
        dataClass: 'text-center no-print',
    }
]

// Vue.config.debug = true


Vue.component('my-detail-row', {
    template: [
        '<div class="detail-row ui form" @click="onClick($event)">',
            '<div class="inline field">',
                '<label>First Name: </label>',
                '<span>@{{rowData.first_name}}</span>',
            '</div>',
            '<div class="inline field">',
                '<label>Middle Name: </label>',
                '<span>@{{rowData.middle_name}}</span>',
            '</div>',
            '<div class="inline field">',
                '<label>Last Name: </label>',
                '<span>@{{rowData.last_name}}</span>',
            '</div>',
            '<div class="inline field">',
                '<label>Email: </label>',
                '<span>@{{rowData.email}}</span>',
            '</div>',
            '<div class="inline field">',
                '<label>Agency: </label>',
                '<span>@{{rowData.agency}}</span>',
            '</div>',
            '<div class="inline field">',
                '<label>Last Login: </label>',
                '<span>@{{rowData.last_login}}</span>',
            '</div>',
            '<div class="inline field">',
                '<label>Modules completed: </label>',
                '<span>@{{rowData.attempts.length}}</span>',
            '</div>',
        '</div>',
    ].join(''),
    props: {
        rowData: {
            type: Object,
            required: true
        }
    },
    methods: {
        onClick: function(event) {
            // console.log('my-detail-row: on-click')
        }
    },
})

new Vue({
    el: '#users',
    data: {
        searchFor: '',
        fields: tableColumns,
        sortOrder: [{
            field: 'id',
            direction: 'asc'
        }],
        multiSort: true,
        perPage: 20,
        paginationComponent: 'vuetable-pagination',
        paginationInfoTemplate: 'แสดง {from} ถึง {to} จากทั้งหมด {total} users',
        itemActions: [
            { name: 'edit-item', label: 'Edit', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-info btn-sm', extra: {style: 'margin-right: 10px', title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "left"} },
            { name: 'delete-item', label: 'Delete', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger btn-sm', extra: {'data-confirm': 'Are you sure?', 'data-token': '{{csrf_token()}}', 'data-method': 'delete', title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
        ],
        moreParams: [],
    },
    watch: {
        'perPage': function(val, oldVal) {
            this.$broadcast('vuetable:refresh')
        },
        'paginationComponent': function(val, oldVal) {
            this.$broadcast('vuetable:load-success', this.$refs.vuetable.tablePagination)
            this.paginationConfig(this.paginationComponent)
        }
    },
    methods: {
        /**
         * Callback functions
         */
        allCap: function(value) {
            return value.toUpperCase()
        },
        gender: function(value) {
          return value == 'M'
            ? '<span class="label label-info"><i class="glyphicon glyphicon-star"></i> Male</span>'
            : '<span class="label label-success"><i class="glyphicon glyphicon-heart"></i> Female</span>'
        },
        formatDate: function(value, fmt) {
            if (value == null) return ''
            fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt
            return moment(value, 'YYYY-MM-DD').format(fmt)
        },
        showDetailRow: function(value) {
            var icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'glyphicon glyphicon-minus-sign' : 'glyphicon glyphicon-plus-sign'
            return [
                '<a class="show-detail-row">',
                    '<i class="' + icon + '"></i>',
                '</a>'
            ].join('')
        },
        completed_all: function(value) {
          return value.length == '{{ $assessments->count() }}'
            ? '<span class="bg-success"><b>Yes</b></span>'
            : '<span class="bg-danger">No</span>'
        },
        checkAdmin: function(value) {
          return value == 1
            ? '<b>Yes</b>'
            : 'No'
        },
        showStatus: function(value) {
          return value == 1
            ? 'Enabled'
            : '<b>Disabled</b>'
        },
        completed: function(value) {
          return value.length
        },
        /**
         * Other functions
         */
        setFilter: function() {
            this.moreParams = [
                'filter=' + this.searchFor
            ]
            this.$nextTick(function() {
                this.$broadcast('vuetable:refresh')
            })
        },
        resetFilter: function() {
            this.searchFor = ''
            this.setFilter()
        },
        preg_quote: function( str ) {
            // http://kevin.vanzonneveld.net
            // +   original by: booeyOH
            // +   improved by: Ates Goral (http://magnetiq.com)
            // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
            // +   bugfixed by: Onno Marsman
            // *     example 1: preg_quote("$40");
            // *     returns 1: '\$40'
            // *     example 2: preg_quote("*RRRING* Hello?");
            // *     returns 2: '\*RRRING\* Hello\?'
            // *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
            // *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'

            return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
        },
        rowClassCB: function(data, index) {
            return (index % 2) === 0 ? 'positive' : ''
        },
        paginationConfig: function(componentName) {
            console.log('paginationConfig: ', componentName)
            if (componentName == 'vuetable-pagination') {
                this.$broadcast('vuetable-pagination:set-options', {
                    wrapperClass: 'pagination',
                    icons: { first: '', prev: '', next: '', last: ''},
                    activeClass: 'active',
                    linkClass: 'btn btn-default',
                    pageClass: 'btn btn-default'
                })
            }
            if (componentName == 'vuetable-pagination-dropdown') {
                this.$broadcast('vuetable-pagination:set-options', {
                    wrapperClass: 'form-inline',
                    icons: { prev: 'glyphicon glyphicon-chevron-left', next: 'glyphicon glyphicon-chevron-right' },
                    dropdownClass: 'form-control'
                })
            }
        },
        // -------------------------------------------------------------------------------------------
        // You can change how sort params string is constructed by overriding getSortParam() like this
        // -------------------------------------------------------------------------------------------
        // getSortParam: function(sortOrder) {
        //     console.log('parent getSortParam:', JSON.stringify(sortOrder))
        //     return sortOrder.map(function(sort) {
        //         return (sort.direction === 'desc' ? '+' : '') + sort.field
        //     }).join(',')
        // }
    },
    events: {
        'vuetable:row-changed': function(data) {
            console.log('row-changed:', data.name)
        },
        'vuetable:row-clicked': function(data, event) {
            console.log('row-clicked:', data.name)
        },
        'vuetable:cell-clicked': function(data, field, event) {
            console.log('cell-clicked:', field.name)
            if (field.name !== '__actions') {
                this.$broadcast('vuetable:toggle-detail', data.id)
            }
        },
        'vuetable:action': function(action, data) {
            console.log('vuetable:action', action, data)
            if (action == 'edit-item') {
                window.location.href = "{{ url('/users/') }}/" + data.id;
            } else if (action == 'delete-item') {
                var r = confirm("Are you sure you want to delete this user?");
                if (r == true) {
                    $.ajax({
                        url: "{{ url('/users/') }}/" + data.id,
                        type: 'DELETE',
                        data: { _method: 'DELETE', _token: '{{ csrf_token() }}'},
                        success: function(data) {
                            location.reload();
                        },
                        error: function(data) {
                            alert("Error while deleting that user. The user may not exist.");
                        }
                      });
                }
                

            }
        },
        'vuetable:load-success': function(response) {
            var data = response.data.data
            if (this.searchFor !== '') {
                for (n in data) {
                    data[n].name = this.highlight(this.searchFor, data[n].name)
                    data[n].email = this.highlight(this.searchFor, data[n].email)
                }
            }
        },
        'vuetable:load-error': function(response) {
            if (response.status == 400) {
                sweetAlert('Something\'s Wrong!', response.data.message, 'error')
            } else {
                sweetAlert('Oops', E_SERVER_ERROR, 'error')
            }
        }
    }
})
</script>
@endsection