@extends('layouts.app')
@section('content')
    <div class="row">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <i class="icon-settings font-dark"></i>
                    <span class="caption-subject bold uppercase">@lang('layout.ItemExpenseClassList')</span>
                </div>
                <div class="tools"></div>
                <div class="btn-group pull-right">
                    @permission('itemExpenseClass-export')
                    <span id="print-modal">
                        <a href="#" @click.prevent="is_show_modal = !is_show_modal" class="btn  btn-success">
                            <i class="fa fa-print"></i>
                        </a>
                        <report-modal :pdf-route="pdfRoute" :excel-route="excelRoute" v-if="is_show_modal"  :value-type="'item_expense_classes_all'" @closed="closeModal">
                        </report-modal>
                    </span>
                    @endpermission
                    @permission('itemExpenseClass-create')
                    <a href="{{route('itemExpenseClass.create')}}">
                        <button class="btn btn-success">
                            <i class="fa fa-plus"></i> @lang('layout.AddNew')
                        </button>
                    </a>
                    @endpermission
                </div>
            </div>
            <div class="portlet-body" id="app" v-cloak>
                <table class="table table-striped table-bordered table-hover" cellspacing="0" id="itemExpenseClass">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>@lang('layout.Name')</th>
                            <th>@lang('layout.Amount')</th>
                            <th>@lang('layout.CreatedAt')</th>
                            <th>@lang('layout.Actions')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
    <!-- END TAB PORTLET-->
    <!-- END CONTENT BODY -->
@stop
@include('datatable.datatable')
@include('print.modal')
@push('scripts')
    <script>
        //Vue.component('pagination',require('laravel-vue-pagination'));
        // Vue.component('pagination',pagination)
        $(document).ready(function() { 
            $('#itemExpenseClass').DataTable( {
                ajax:           '{{route("itemExpenseClass.index")}}',
                pageLength:'{{getPageRows()}}',
                scrollCollapse: true,
                serverSide: true,
                paging:         true,
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'description', name: 'description' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'actions', name: 'actions' ,orderable:false,searchable:false },
                ] 
            }); 
        });
        new Vue({
            el: '#app',
            data() {
                let sortOrders = {};
                let columns = [
                    {label: '#', name: '#'},
                    {label: '@lang('layout.Name')', name: 'name'},
                    {label: '@lang("layout.CreatedAt")', name: 'created_at'},
                    {label: '@lang("layout.Actions")', name: 'id'}
                ];
                columns.forEach((column) => {
                    sortOrders[column.name] = -1;
                });
                return {
                    sortKey: 'id',
                    columns: columns,
                    sortOrders: sortOrders,
                    perPage: [10, 20, 30],
                    tableData: {
                        draw: 0,
                        length: 10,
                        search: '',
                        column: 0,
                        dir: 'desc'
                    },
                    itemExpense: {data: []}
                }
            },
            methods: {
                sortBy(key) {
                    this.sortKey = key;
                    this.sortOrders[key] = this.sortOrders[key] * -1;
                    this.tableData.column = this.getIndex(this.columns, 'name', key);
                    this.tableData.dir = this.sortOrders[key] == 1 ? 'asc' : 'desc';
                    this.fetchData();
                },
                getIndex(array, key, value) {
                    return array.findIndex(i => i[key] == value)
                },
                fetchData(page = 1) {
                    this.tableData.draw = this.tableData.draw + 1;
                    axios.get('{{route("itemExpenseClass.index")}}?page=' + page, {params: this.tableData})
                    .then((response) => {
                        if (this.tableData.draw == response.data.draw) {
                            this.itemExpense = response.data.itemExpense;
                            console.log('length', this.itemExpense)
                        }
                    })
                },
                deleteRecord(id) {
                    if (confirm('@lang('message.DeleteMessage')')) {
                        axios.post('{!! url('/') !!}/itemExpenseClass/' + id, {
                            _method: 'DELETE',
                            _token: '{!!  csrf_token() !!}'
                        })
                        .then((response) => {
                            this.fetchData()
                        });
                    }
                },
            },
            created() {
                this.fetchData();
            }
        });
        var print = new Vue({
            el: '#print-modal',
            data:{
                is_show_modal: false,
                pdfRoute: '{!!route('export.PDFAll') !!}',
                excelRoute: '{!! route('export.ExcelAll') !!}'
            },
            methods:{
                closeModal: function(){
                    print.is_show_modal = !print.is_show_modal;
                }
            }
        });
    </script>
@endpush