@extends ('backend.layouts.app')

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

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

@push('after-styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .dataTables_length {
            float: left;
        }

        div.dt-buttons {
            float: right;
        }
    </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">
                        {{ __('customer::labels.backend.customer.management') }} <small
                            class="text-muted">{{ __('customer::labels.backend.customer.list') }}</small>
                    </h4>
                </div><!--col-->

                <div class="col-sm-7">
                    @include('customer::includes.header-buttons')
                </div><!--col-->
            </div><!--row-->
            <div class="row">
                <div class="col-md-3">
                    <input type="text" class="date_range form-control" placeholder="Choose Dates">
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    <div class="table-responsive">
                        <table id="customer-table" class="table table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th>{{ __('customer::labels.backend.customer.table.id') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.table.name') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.table.township') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.table.email') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.table.mobile') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.table.card_no') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.table.used_point') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.table.balance_point') }}</th>
                                    <th>{{ __('labels.backend.access.users.tabs.content.overview.status') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.table.created') }}</th>
                                    <th>{{ __('customer::labels.backend.customer.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('https://cdn.jsdelivr.net/momentjs/latest/moment.min.js') }}
    {{ script('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js') }}
    {{ script('assets/plugins/select2/js/select2.full.min.js') }}
    {{ script('assets/plugins/select2/component/components-select2.js') }}

    {{ 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>
        $(function() {
            $('.date_range').daterangepicker({
                "showDropdowns": true,
                locale: {
                    format: 'YYYY-MM-DD'
                },
                maxSpan: {
                    days: 31
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
            }, function(start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format(
                    'YYYY-MM-DD') + ' (predefined range: ' + label + ')');
            }).attr('readOnly', 'true').css('cursor', 'pointer').val('').change(function(e) {
                dataTable.draw()
            });
            const colArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
            const dataTable = $('#customer-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,
                "lengthMenu": [10, 25, 50, 100, 200, 300, 400, 500],
                ajax: {
                    url: '{!! route('admin.customer.get') !!}',
                    type: 'post',
                    data: function(d) {
                        d.date_range = $('.date_range').val();
                    },
                    error: function(xhr, err) {
                        if (err === 'parsererror')
                            location.reload();
                        else swal(xhr.responseJSON.message);
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'township',
                        name: 'township',
                        sortable: false
                    },
                    {
                        data: 'user.email',
                        name: 'user.email',
                        searchable: true
                    },
                    {
                        data: 'mobile',
                        name: 'mobile'
                    },
                    {
                        data: 'card_no',
                        name: 'card_no'
                    },
                    {
                        data: 'used_point',
                        name: 'used_point'
                    },
                    {
                        data: 'balance_point',
                        name: 'balance_point'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        searchable: false,
                        sortable: false
                    }
                ],
                order: [
                    [0, "desc"]
                ],
                searchDelay: 500,
                fnDrawCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    load_plugins();
                },
            });
        });
    </script>
@endpush