@extends ('backend.layouts.app')

@section('title', app_name() . ' | ' . __('reward::labels.backend.reward.management'))

@section('breadcrumb-links')
    @include('reward::includes.breadcrumb-links')
@endsection

@push('after-styles')
    {{ style('assets/plugins/bootstrap3-editable/bootstrap3-editable/css/bootstrap-editable.css') }}
    <style>
        .dataTables_length {
            float: left;
        }

        div.dt-buttons {
            float: right;
        }

        .editable-error-block {
            color: red;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-5">
                    <h4 class="card-title mb-0">
                        {{ __('reward::labels.backend.reward.management') }} <small
                            class="text-muted">{{ __('reward::labels.backend.reward.list') }}</small>
                    </h4>
                </div><!--col-->

                <div class="col-sm-7">
                    @include('reward::includes.header-buttons')
                </div><!--col-->
            </div><!--row-->

            <div class="row mt-4">
                <div class="col">
                    <div class="table-responsive">
                        <table id="reward-table" class="table table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th>{{ __('reward::labels.backend.reward.table.id') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.client') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.name') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.type') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.value') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.redeem_points') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.available_quantity') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.status') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.validity') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.coupon_expired_days') }}</th>
                                    <th>{{ __('reward::labels.backend.reward.table.last_updated') }}</th>
                                    <th>{{ __('labels.general.actions') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div><!--col-->
            </div><!--row-->
        </div><!--card-body-->
    </div><!--card-->
@endsection

@push('after-scripts')
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    {{ script('https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js') }}
    {{ script('https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js') }}
    {{ script('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js') }}
    {{ script('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js') }}
    {{ script('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js') }}
    {{ script('https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js') }}
    {{ script('https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js ') }}
    {{ script('https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js') }}
    {{ script('assets/plugins/bootstrap3-editable/bootstrap3-editable/js/bootstrap-editable.min.js') }}
    <script>
        $(function() {
            var colArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
            $('#reward-table').DataTable({
                language: {
                    processing: "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
                },
                dom: 'lBfrtip',
                buttons: [{
                        extend: 'copy',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: colArray
                        }
                    }
                ],
                processing: true,
                searching: true,
                serverSide: true,
                ajax: {
                    url: '{!! route('admin.reward.get') !!}',
                    type: 'post',
                    error: function(xhr, err) {
                        if (err === 'parsererror')
                            location.reload();
                        else swal(xhr.responseJSON.message);
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'client',
                        name: 'client.merchant_name',
                        searchable: true
                    },
                    {
                        data: 'name',
                        name: 'name',
                        searchable: false
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'value',
                        name: 'value'
                    },
                    {
                        data: 'redeem_points',
                        name: 'redeem_points'
                    },
                    {
                        data: 'available_quantity',
                        name: 'available_quantity'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'validity',
                        name: 'validity'
                    },
                    {
                        data: 'coupon_expired_days',
                        name: 'coupon_expired_days'
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        searchable: false,
                        sortable: false
                    }
                ],
                order: [
                    [0, "asc"]
                ],
                searchDelay: 500,
                fnDrawCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    load_plugins();
                    $.fn.editable.defaults.mode = 'inline';
                    $.fn.editable.defaults.ajaxOptions = {
                        type: "PUT"
                    };

                    $.fn.editable.defaults.params = function(params) {
                        params._token = $("#_token").data("token");
                        return params;
                    };
                    $('.update_data').editable();
                }
            });
        });
    </script>
@endpush