@extends('admin.layout.master')

@section('content')
    <div class="row">
        <div class="col-md-12 ">
            <ol class="breadcrumb">
                <li><a href="{{route('admin.home')}}">صفحه اصلی</a></li>
                <li class="active">لیست کاربران</li>
            </ol>
        </div>
        <modal v-if="modal.destroy" @close="modal.destroy=false">
            <h3 style="margin:0" slot="header">آیا مایل به حدف هستید؟</h3>
            <div slot="body" class="row">
                <div class="col-md-12">
                    <div class="col-md-4">
                        <div class="col-md-12 blue-grey white-text pd5 z-depth-2 br4 text-center">شناسه</div>
                    </div>
                    <div class="col-md-8">
                        <div class="col-md-12 blue-grey white-text pd5 z-depth-2 br4 text-center" v-text="model.id"></div>
                    </div>
                    <div class="clearfix mb10"></div>
                    <div class="col-md-4">
                        <div class="col-md-12 blue-grey white-text pd5 z-depth-2 br4 text-center">ایمیل</div>
                    </div>
                    <div class="col-md-8">
                        <div class="col-md-12 blue-grey white-text pd5 z-depth-2 br4 text-center" v-text="model.email"></div>
                    </div>
                    <div class="clearfix mb10"></div>
                    <div class="col-md-4">
                        <div class="col-md-12 blue-grey white-text pd5 z-depth-2 br4 text-center">نام</div>
                    </div>
                    <div class="col-md-8">
                        <div class="col-md-12 blue-grey white-text pd5 z-depth-2 br4 text-center" v-text="model.firstName"></div>
                    </div>
                    <div class="clearfix mb10"></div>
                    <div class="col-md-4">
                        <div class="col-md-12 blue-grey white-text pd5 z-depth-2 br4 text-center">نام خانوادگی</div>
                    </div>
                    <div class="col-md-8">
                        <div class="col-md-12 blue-grey white-text pd5 z-depth-2 br4 text-center" v-text="model.lastName"></div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <a @click.prevent.default="Destroy" href="#!" class="waves-effect waves-green btn quarter">تایید</a>
                <a @click.prevent.default="modal.destroy=false" href="#!" class="waves-effect waves-green btn quarter blue-grey darken-2 pull-left">انصراف</a>
            </div>
        </modal>
    </div>
    <div class="row white z-depth-1">
        <span class="blue-grey darken-3 white-text title percent-80 z-depth-2">لیست کاربران</span>
        <div class="col-md-4 col-md-offset-4 mt10 text-center">
                <a :href="currentUrl+'/'+'create'" class="waves-effect full waves-light btn blue darken-1"><i class="material-icons left">add</i>ایجاد</a>
            </div>
        <div class="col-md-12 mt20">
            <div class="col-md-12">
                <div class="input-field">
                    <input id="query" name="query" type="text" class="validate" v-model="query">
                    <label for="query">جستجو در تمامی فیلد ها</label>
                </div>
            </div>
            <div class="col-md-12 pd0">
                <ul class="collapsible popout" data-collapsible="accordion">
                    <li class="ml0 mr0">
                        <div class="collapsible-header"><i class="material-icons">search</i>جستجو پیشرفته</div>
                        <div class="collapsible-body row">
                            <div class="col-md-4">
                                <div class="input-field">
                                    <input id="userName_label" name="userName" type="text" class="validate" v-model="search.like_userName">
                                    <label for="userName_label">نام کاربری</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-field">
                                    <input id="email_label" name="email" type="text" class="validate" v-model="search.like_email">
                                    <label for="email_label">ایمیل</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-field">
                                    <input id="nationalCode" name="nationalCode" type="text" class="validate dleft" v-model="search.like_nationalCode">
                                    <label for="nationalCode">کد ملی</label>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-md-6">
                                <div class="input-field">
                                    <input id="firstName" name="firstName" type="text" class="validate" v-model="search.like_firstName">
                                    <label for="firstName">نام</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-field">
                                    <input id="lastName" name="lastName" type="text" class="validate" v-model="search.like_lastName">
                                    <label for="lastName">نام خانوادگی</label>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-md-6">
                                <div class="input-field">
                                    <input id="mobile" name="mobile" type="text" class="validate" v-model="search.like_mobile">
                                    <label for="mobile">موبایل</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-field">
                                    <input id="telephone" name="telephone" type="text" class="validate" v-model="search.like_telephone">
                                    <label for="telephone">تلفن</label>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="clearfix"></div>
                            <div class="col-md-4 mb20">
                                <label for="gender">جنسیت</label>
                                <multiselect id="gender" v-model="gender.selected" :options="gender.list" label="title" :multiple="false" :close-on-select="true" track-by="id" :internal-search="false"></multiselect>
                            </div>
                            <div class="col-md-4 mb20">
                                <label for="payStatus">وضعیت پرداخت</label>
                                <multiselect id="payStatus" v-model="payStatus.selected" :options="payStatus.list" label="title" :multiple="false" :close-on-select="true" track-by="id" :internal-search="false"></multiselect>
                            </div>
                            <div class="col-md-4 mb20">
                                <label for="states">انتخاب استان</label>
                                <multiselect id="states" v-model="state.selected" :options="state.list" @search-change="searchMultiSelect($event,'state',{withstate:1})" :custom-label="customLabel" :multiple="false" :close-on-select="true" track-by="id" :internal-search="false">
                                    <span v-if="state.list.length > 0 && isMoreResult('state')"  @click="moreResult('state')" class="waves-effect waves-light btn quarter center-block teal darken-2 mt20" slot="afterList">
                                        <span v-if="state.loading"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span>
                                        <span v-else>موارد بیشتر</span>
                                    </span>
                                </multiselect>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-md-6">
                                <div class="input-field">
                                    <i class="material-icons prefix">date_range</i>
                                    <input id="date_start" name="date_start" type="text" class="validate date">
                                    <label class="active" for="date_start">از تاریخ</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-field">
                                    <i class="material-icons prefix">date_range</i>
                                    <input id="date_end" name="date_end" type="text" class="validate date">
                                    <label class="active" for="date_end">تا تاریخ</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button @click="Msearch" class="waves-effect waves-light btn quarter center-block blue-grey darken-2 mt20">جستجو</button>
                            </div>
                            <div class="col-md-6 text-right">
                                <button @click="getExcel" class="waves-effect waves-light btn quarter blue-grey darken-2 mt20">اکسل</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-md-12 pd4">
            <div class="table-responsive">
                <table class="table table-bordered table-hover white">
                    <thead class="blue-grey darken-2 white-text">
                    <tr>
                        <th @click="sort('orderby_id')">شناسه
                            <i v-if="params.orderby_id === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_id === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_userName')">نام کاربری
                            <i v-if="params.orderby_userName === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_userName === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_firstName')">نام
                            <i v-if="params.orderby_firstName === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_firstName === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_lastName')">نام خانوادگی
                            <i v-if="params.orderby_lastName === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_lastName === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_nationalCode')">کد ملی
                            <i v-if="params.orderby_nationalCode === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_nationalCode === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_mobile')">موبایل
                            <i v-if="params.orderby_mobile === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_mobile === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_telephone')">تلفن
                            <i v-if="params.orderby_telephone === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_telephone === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_user_referal_count')">تعداد معرف
                            <i v-if="params.orderby_user_referal_count === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_user_referal_count === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_exams')">وضعیت پرداخت
                            <i v-if="params.orderby_exams === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_exams === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th @click="sort('orderby_created_at')">تاریخ ایجاد
                            <i v-if="params.orderby_created_at === 'asc'" class="fa fa-sort-amount-asc" aria-hidden="true"></i>
                            <i v-if="params.orderby_created_at === 'desc'" class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                        </th>
                        <th>عملیات</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in itemList">
                        <td v-text="item.id"></td>
                        <td v-text="item.userName"></td>
                        <td v-text="item.firstName"></td>
                        <td v-text="item.lastName"></td>
                        <td v-text="item.nationalCode"></td>
                        <td v-text="item.mobile"></td>
                        <td v-text="item.telephone"></td>
                        <td v-text="item.referal_organizion_count"></td>

                        <td>
                            <i v-if="item.service_card.length > 0" class="fa fa-check teal-text fa-lg mt10" aria-hidden="true"></i>
                            <i v-else class="fa fa-times red-text fa-lg" aria-hidden="true"></i>
                        </td>
                        <td v-text="toPersian(item.created_at)" class="dleft"></td>
                        <td>
                            @can('user_crud_update')
                                <a :href="currentUrl+'/'+item.id+'/edit'" class="btn-floating waves-effect waves-light blue"><i class="material-icons">edit</i></a>
                            @endcan

                            @can('user_crud_login')
                                <a :href="'user/'+item.id+'/login'" class="btn-floating waves-effect waves-light mr20 blue"><i class="material-icons">lock_open</i></a>
                            @endcan

                            @can('user_crud_changestatus')
                                <a :href="'user/'+item.id+'/changestatus'" class="btn-floating waves-effect waves-light mr20 blue"><i class="material-icons">assignment</i></a>
                            @endcan

                            @can('user_crud_destroy')
                                <a href="#!" @click.prevent.default="callDestroy(item)" class="btn-floating waves-effect waves-light red mr20"><i class="material-icons">delete</i></a>
                            @endcan
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-12">
            <paginate v-if="itemList" v-model="itemList" :is-reset="reset" :url="currentUrl" :params="params"></paginate>
        </div>

    </div>
    <vue-toastr ref="toastr"></vue-toastr>
@endsection

@push('scripts')
    <script src="{{asset('assets/plugins/datePicker/moment.js')}}"></script>
    <script src="{{asset('assets/plugins/datePicker/moment-jalali.js')}}"></script>
    <script src="{{asset('assets/plugins/datePicker/persianDate.js')}}"></script>
    <script src="{{asset('assets/plugins/datePicker/datePicker.js')}}"></script>
    <script src="{{asset('assets/js/modal.js')}}"></script>
    <script src="{{asset('assets/js/paginator.js')}}"></script>
    <script src="{{asset('assets/js/vuetoaster.js')}}"></script>
    <script src="{{asset('assets/plugins/vueselect/vueselect.js')}}"></script>

    <script>
        Vue.component('Multiselect', VueMultiselect.default);

        var vm = new Vue({
            el: '#app',
            data: {
                currentUrl: location.pathname,
                instance: axios.create({baseURL: location.pathname,}),
                ax:axios.create({baseURL: baseUrl,headers:{'Authorization':'Bearer {{auth()->user()->api_token}}'}}),
                itemList: [],
                reset: false,
                params: {},
                query: '',
                search: {
                    like_caseId: '',
                    like_nationalCode: '',
                    like_firstName: '',
                    like_lastName: '',
                    like_mobile: '',
                    like_date_start: '',
                    like_date_end: '',
                    exam_id: '',
                },
                modal: {
                    destroy: false
                },
                model: {
                    mode: 'create',
                    id: '',
                    title: '',
                    body: '',
                    destroy: []
                },
                gender: {
                    list: [
                        {
                            id: 'male',
                            title: 'مرد'
                        },
                        {
                            id: 'female',
                            title: 'زن'
                        },
                    ],
                    selected: ''
                },
                ageGroup: {
                    list: [
                        {
                            id: 'upEighteen',
                            title: 'بالای هجده سال'
                        },
                        {
                            id: 'downEighteen',
                            title: 'زیر هیجده سال'
                        },
                        {
                            id: 'all',
                            title: 'همه'
                        },
                    ],
                    selected: ''
                },
                payStatus: {
                    list: [
                        {
                            id: 'success',
                            title: 'پرداخت شده'
                        },
                        {
                            id: 'error',
                            title: 'پرداخت نشده'
                        },
                    ],
                    selected: ''
                },
                documents: {
                    list: [
                        {
                            id: 'agree',
                            title: 'آپلود شده'
                        },
                        {
                            id: 'deny',
                            title: 'آپلود نشده'
                        },
                    ],
                    selected: ''
                },
                isActive: {
                    list: [
                        {
                            id: 'agree',
                            title: 'صادر شده'
                        },
                        {
                            id: 'deny',
                            title: 'صادر نشده'
                        },
                    ],
                    selected: ''
                },
                state:{
                    url:'/v1/region/state',
                    list:[],
                    selected:[],
                    query:'',
                    params:{},
                    data:[],
                    loading:false
                },
            },
            created: function () {
                this.searchMultiSelect(null, 'state',{});
            },
            methods: {
                Msearch:function () {
                    listParams = ['like_caseId','like_email', 'like_nationalCode', 'like_firstName', 'like_lastName', 'like_mobile', 'like_date_start', 'like_date_end'];
                    for (var i = 0; i < listParams.length; i++) {
                        if (this.search[listParams[i]] === '' || this.search[listParams[i]] == undefined) {
                            delete this.search[listParams[i]];
                        }
                    }

                    if (this.gender.selected) {
                        this.search['gender'] = this.gender.selected.id;
                    } else {
                        delete this.search['gender'];
                    }

                    if (this.ageGroup.selected) {
                        this.search['agegroup'] = this.ageGroup.selected.id;
                    } else {
                        delete this.search['agegroup'];
                    }

                    if (this.payStatus.selected) {
                        this.search['paystatus'] = this.payStatus.selected.id;
                    } else {
                        delete this.search['paystatus'];
                    }


                    if (this.documents.selected) {
                        this.search['documents'] = this.documents.selected.id;
                    } else {
                        delete this.search['documents'];
                    }


                    if (this.isActive.selected) {
                        this.search['active'] = this.isActive.selected.id;
                    } else {
                        delete this.search['active'];
                    }

                    if (this.state.selected) {
                        this.search['state_id'] = this.state.selected.id;
                    } else {
                        delete this.search['state_id'];
                    }


                    this.params = this.search;
                    this.reset  = !this.reset;
                },
                agreeUsers:function () {
                    listParams = ['like_caseId','like_email', 'like_nationalCode', 'like_firstName', 'like_lastName', 'like_mobile', 'like_date_start', 'like_date_end'];
                    for (var i = 0; i < listParams.length; i++) {
                        if (this.search[listParams[i]] === '' || this.search[listParams[i]] == undefined) {
                            delete this.search[listParams[i]];
                        }
                    }

                    if (this.gender.selected) {
                        this.search['gender'] = this.gender.selected.id;
                    } else {
                        delete this.search['gender'];
                    }

                    if (this.ageGroup.selected) {
                        this.search['agegroup'] = this.ageGroup.selected.id;
                    } else {
                        delete this.search['agegroup'];
                    }

                    if (this.payStatus.selected) {
                        this.search['paystatus'] = this.payStatus.selected.id;
                    } else {
                        delete this.search['paystatus'];
                    }


                    if (this.documents.selected) {
                        this.search['documents'] = this.documents.selected.id;
                    } else {
                        delete this.search['documents'];
                    }


                    if (this.isActive.selected) {
                        this.search['active'] = this.isActive.selected.id;
                    } else {
                        delete this.search['active'];
                    }

                    this.ax.post('/admin/users/agree?', this.search).then(function (response) {
                        this.reset = !this.reset;
                        this.modal.destroy = false;
                        this.$refs.toastr.defaultPosition = "toast-bottom-left";
                        this.$refs.toastr.s("کاربران تایید شدند");
                    }.bind(this));
                },
                denyUsers:function () {
                    listParams = ['like_caseId','like_email', 'like_nationalCode', 'like_firstName', 'like_lastName', 'like_mobile', 'like_date_start', 'like_date_end'];
                    for (var i = 0; i < listParams.length; i++) {
                        if (this.search[listParams[i]] === '' || this.search[listParams[i]] == undefined) {
                            delete this.search[listParams[i]];
                        }
                    }

                    if (this.gender.selected) {
                        this.search['gender'] = this.gender.selected.id;
                    } else {
                        delete this.search['gender'];
                    }

                    if (this.ageGroup.selected) {
                        this.search['agegroup'] = this.ageGroup.selected.id;
                    } else {
                        delete this.search['agegroup'];
                    }

                    if (this.payStatus.selected) {
                        this.search['paystatus'] = this.payStatus.selected.id;
                    } else {
                        delete this.search['paystatus'];
                    }


                    if (this.documents.selected) {
                        this.search['documents'] = this.documents.selected.id;
                    } else {
                        delete this.search['documents'];
                    }


                    if (this.isActive.selected) {
                        this.search['active'] = this.isActive.selected.id;
                    } else {
                        delete this.search['active'];
                    }


                    this.ax.post('/admin/users/deny?', this.search).then(function (response) {
                        this.reset = !this.reset;
                        this.modal.destroy = false;
                        this.$refs.toastr.defaultPosition = "toast-bottom-left";
                        this.$refs.toastr.s("کاربران تایید رد شده اند.");
                    }.bind(this));
                },


                getExcel:function () {
                    var url = '/panel/admin/user/excel?';
                    listParams = ['like_email','like_userName', 'like_nationalCode', 'like_firstName', 'like_lastName', 'like_mobile', 'like_date_start', 'like_date_end'];
                    for (var i = 0; i < listParams.length; i++) {
                        if (this.search[listParams[i]] !== "" && this.search[listParams[i]] != undefined) {
                            url += listParams[i] + '=' + this.search[listParams[i]] +'&';
                        }
                    }

                    if (this.gender.selected) {
                        url += 'gender=' + this.gender.selected.id+'&';
                    }

                    if (this.ageGroup.selected) {
                        url += 'ageGroup=' + this.ageGroup.selected.id+'&';
                    }

                    if (this.payStatus.selected) {
                        url += 'paystatus=' + this.payStatus.selected.id+'&';
                    }


                    if (this.documents.selected) {
                        url += 'documents=' + this.documents.selected.id;
                    }


                    if (this.isActive.selected) {
                        url += 'active=' + this.isActive.selected.id;
                    }

                    window.location.href = url;

                },
                labelAge: function (age) {
                    if (age > 18) {
                        return '+18';
                    } else if (age == 0) {
                        return 'ثبت نشده'
                    } else {
                        return '-18';
                    }
                },
                toPersian: function (input) {
                    return moment(input, 'YYYY/MM/DD HH:mm:ss').format('jYYYY/jMM/jDD');
                },


                sort: function (query) {
                    this.reset = !this.reset;
                    if (this.changeSort(this.params[query]) === '') {
                        delete this.params[query];
                    } else {
                        this.params[query] = this.changeSort(this.params[query]);
                    }
                },
                changeSort: function (value) {
                    if (value === '' || value === undefined) {
                        return 'asc';
                    } else if (value === 'asc') {
                        return 'desc'
                    } else {
                        return ''
                    }
                },
                callDestroy: function (item) {
                    this.model = item;
                    this.modal.destroy = true;
                },
                Destroy: function () {
                    var id = this.model.id;
                    this.instance.delete('/' + id, {}).then(function (response) {
                        this.reset = !this.reset;
                        this.modal.destroy = false;
                        this.$refs.toastr.defaultPosition = "toast-bottom-left";
                        this.$refs.toastr.s("{{trans('Basic::all.delete.deleted')}}");
                    }.bind(this));
                },

                customLabel: function (element) {
                    return element.title;
                },
                searchMultiSelect: function (query,field,extraQuery = {}) {
                    this[field].params = extraQuery;
                    if (query) {
                        this[field].params.query = query;
                    }

                    if (query !== '' || query === null) {
                        this.ax.get(this[field].url, {params:this[field].params}).then(function (response) {
                            this[field].query = query;
                            this[field].list = response.data.data;
                            this[field].data = response.data;
                        }.bind(this));
                    }
                },
                isMoreResult: function (field) {
                    return (this[field].data.current_page + 1 <= this[field].data.last_page);
                },
                moreResult:function (field) {
                    if (this.isMoreResult(field)) {
                        this[field].loading = true;
                        this[field].params.page = this[field].data.current_page + 1;

                        this.ax.get(this[field].url, {params:this[field].params}).then(function (response) {
                            this[field].list = this[field].list.concat(response.data.data);
                            this[field].data = response.data;
                            this[field].loading = false;
                        }.bind(this));
                    }
                }
            },
            computed: {
                isEdit: function () {
                    return (this.model.mode === 'edit');
                },
                isDestroy: function () {
                    return (this.model.mode === 'destroy');
                },
            },
            watch: {
                query: function () {
                    this.params.query = this.query;
                    this.reset = !this.reset;
                },
            },
            components: {
                'vue-toastr': window.vueToastr,
            }
        });

        $(document).ready(function () {
            $("#date_start").pDatepicker({
                format: "YYYY/MM/DD",
                onSelect: function (unix) {
                    Materialize.updateTextFields();
                    unix = new persianDate(unix).toCalendar('gregorian').toLocale('en').format('YYYY/MM/DD');
                    vm.$data.search.like_date_start = unix;
                }
            });
            $("#date_end").pDatepicker({
                format: "YYYY/MM/DD",
                onSelect: function (unix) {
                    Materialize.updateTextFields();
                    unix = new persianDate(unix).toCalendar('gregorian').toLocale('en').format('YYYY/MM/DD');
                    vm.$data.search.like_date_end = unix;
                }
            });
            $(".date").val('');
        });

    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="{{asset('assets/plugins/datePicker/persianDatePicker.css')}}">
    <link rel="stylesheet" href="{{asset('assets/plugins/datePicker/custom.css')}}"/>
    <link rel="stylesheet" href="{{asset('assets/plugins/vueselect/vueselect.css')}}">
@endpush