@inject('model', '\App\Domains\Auth\Models\User')

@extends('backend.layouts.app')

@section('title', __('Show Promoters'))

@section('content')
<div class="container py-4" style="max-width: 1320px;">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <x-frontend.card>
                <x-slot name="header">
                    @lang('All Retailers')
                </x-slot>

                <x-slot name="body">
                    <div class="row">
                        <div class="col-md-12">
                            @include('includes.partials.messages')
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col">
                                            <div class="table-responsive">
                                                <table id="list_table" class="table table-striped table-bordered">
                                                    <thead>
                                                        <tr role="row">
                                                            <th>Sr. No</th>
                                                            <th>AM Name</th>
                                                            <th>Retailer ID</th>
                                                            <th>Phone No</th>
                                                            <th>Area Name</th>
                                                            <th>Shopkeeper Name</th>
                                                            <th>Shop Address</th>
                                                            <th>Visiblity</th>
                                                            <th>Visiblity Res</th>
                                                            <th>Moub Brand Res</th>
                                                            <th>Previous Brand</th>
                                                            <th>Sample Tried</th>
                                                            <th>Product Likability</th>
                                                            <th>Image Link 1</th>
                                                            <th>Image Link 2</th>
                                                            <th>SFA Id</th>
                                                            <th>TL Name</th>
                                                            <th>Last Updated By</th>
                                                            <th>Sub Location</th>
                                                            <th>Created At</th>
                                                        </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </x-slot>
            </x-frontend.card>
        </div>
        <!--col-md-10-->
    </div>
    <!--row-->
</div>
<!--container-->
@endsection
@section('script')
<script type="text/javascript">
    var list_table_tab;
    var hidden_columns = true;
    jQuery(function() {
        var tu = "{{ route('admin.auth.retailers-show') }}";
        if (jQuery(window).width() <= 375) {
            jQuery.fn.DataTable.ext.pager.numbers_length = 7;
        }

        var cols = [{
                "data": "DT_RowIndex",
                "name": 'DT_RowIndex'
            },
            {
                "data": "am_name",
                "name": 'am_name'
            },
            {
                "data": "retailer_id",
                "name": 'retailer_id'
            },
            {
                "data": "phone_no",
                "name": 'phone_no'
            },
            {
                "data": "area_name",
                "name": 'area_name'
            },
            {
                "data": "shopkeeper_name",
                "name": 'shopkeeper_name'
            },

            {
                "data": "shop_address",
                "name": 'shop_address'
            }, {
                "data": "visiblity",
                "name": 'visiblity'
            }, {
                "data": "visiblity_res",
                "name": 'visiblity_res'
            }, {
                "data": "moub_brand_res",
                "name": 'moub_brand_res'
            },

            {
                "data": "previous_brand_res",
                "name": 'previous_brand_res',
            }, {
                "data": "sample_tried_type_res",
                "name": 'sample_tried_type_res',
            }, {
                "data": "product_likability_res",
                "name": 'product_likability_res',
            }, {
                "data": "image_link_res_1",
                "name": 'image_link_res_1',
            }, {
                "data": "image_link_res_2",
                "name": 'image_link_res_2',
            },
            {
                "data": "sfa_id",
                "name": 'sfa_id'
            },
            {
                "data": "tl_name",
                "name": 'tl_name'
            },
            {
                "data": "last_updated_by",
                "name": 'last_updated_by'
            },
            {
                "data": "sub_location",
                "name": 'sub_location'
            },
            {
                "data": "created_at",
                "name": 'created_at'
            },
        ];

        var order = [
            [1, 'asc']
        ];

        var list_table_tab = jQuery("#list_table").DataTable({
            dom: 'Bfrtip',
            lengthMenu: [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            buttons: [
                'csv', 'excel', 'pdf', 'pageLength'
            ],
            destroy: true,
            processing: true,
            stateSave: true,
            stateSaveParams: function(settings, data) {
                data.start = 0;
                data.search.search = "";
                data.columns.forEach(function(a) {
                    a.search.search = "";
                });
                if (order.length > 0) {
                    if (order[0].length) {
                        data.order[0] = order[0][0];
                        data.order[1] = order[0][1];
                    }

                }
            },
            lengthMenu: [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            pagingType: "simple_numbers",
            paging: true,
            ordering: true,
            serverSide: true,
            ajax: tu,
            columns: cols,
            order: order,
        });
    });
</script>
@endsection