@extends('frontend.layouts.app')

@section('title', __('Dashboard'))

@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('Promoter Wise Performance')
                </x-slot>

                <x-slot name="body">
                    <div class="row">
                        <div class="col-md-12">
                            @include('includes.partials.messages')
                            <div class="card">
                                <div class="card-header row">
                                    <div class="col-md-3 pull-right">
                                        <label for="showWithdrawalOnclick">Date</label>
                                        <input type="date" class="form-control pickadate showWithdrawalOnclick picker__input picker__input--active" value="">
                                    </div>
                                    <!-- <div class="col-md-3 pull-right">
                                        <label for="endOnclick">End Date</label>
                                        <input type="date" class="form-control pickadate endOnclick picker__input picker__input--active" value="">
                                    </div> -->
                                    <div class="col-md-3 pull-right">
                                        <label for="searchLocation">Location</label>
                                        <select name="searchLocation" id="searchLocation" class="searchLocation form-control">
                                            <option value="">-- Select here --</option>
                                            <option value="North"> North </option>
                                            <option value="South"> South </option>
                                            <option value="East"> East </option>
                                            <option value="WEST"> WEST </option>
                                            <option value="Bhubaneswar"> Bhubaneswar </option>
                                            <option value="Cuttack"> Cuttack </option>
                                        </select>
                                    </div>
                                </div>
                                <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>Promoter Name</th>
                                                            <th>Promoter Number</th>
                                                            <!-- <th>Market</th> -->
                                                            <th>Zone</th>
                                                            <th>Total Customer Contacted</th>
                                                            <th>Total Engagement</th>
                                                            <th>Total Sample Tried</th>
                                                            <th>Productive</th>
                                                            <th>Productive %</th>
                                                            <th>GF Indiemint</th>
                                                            <th>Total</th>
                                                            <th>Wave</th>
                                                            <th>GFP</th>
                                                            <!-- <th>Capstan</th> -->
                                                            <th>Others</th>
                                                            <th>Flake</th>
                                                            <!-- <th>Special</th>
                                                            <th>SilkCut</th>
                                                            <th>GFSS</th>
                                                            <th>GFSS Mint</th> -->
                                                            <th>Players</th>
                                                            <!-- <th>Berkeley</th>
                                                            <th>Charms</th>
                                                            <th>Charminar</th>
                                                            <th>Filter</th>
                                                            <th>American</th>
                                                            <th>Editions</th> -->
                                                            <th>Last Time</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;
    var filter,
        newlocation;
    jQuery(function() {
        var tu = "{{ route('frontend.user.promoter-wise-performance') }}";
        if (jQuery(window).width() <= 375) {
            jQuery.fn.DataTable.ext.pager.numbers_length = 7;
        }

        var cols = [{
                "data": "DT_RowIndex",
                "name": 'DT_RowIndex'
            },
            {
                "data": "promoterName",
                "name": 'promoterName'
            },
            {
                "data": "promoterNumber",
                "name": 'promoterNumber'
            },
            // {
            //     "data": "market",
            //     "name": 'market'
            // },
            {
                "data": "promoterZone",
                "name": 'promoterZone'
            },
            {
                "data": "total_no_contact",
                "name": 'total_no_contact'
            },
            {
                "data": "total_engagement",
                "name": 'total_engagement'
            },
            {
                "data": "total_sample_tried",
                "name": 'total_sample_tried'
            }, {
                "data": "productive",
                "name": 'productive'
            }, {
                "data": "productivePer",
                "name": 'productivePer'
            }, {
                "data": "indieMint",
                "name": 'indieMint',
                "render": function(data) {
                    if (data != 0) {
                        return data;
                    }
                    return "N/A";
                }
            },
            {
                "data": "Total",
                "name": 'Total',
                "render": function(data) {
                    if (data != 0) {
                        return data;
                    }
                    return "N/A";
                }
            }, {
                "data": "Wave",
                "name": 'Wave',
                "render": function(data) {
                    if (data != 0) {
                        return data;
                    }
                    return "N/A";
                }
            },
            {
                "data": "goldFlake",
                "name": 'goldFlake',
                "render": function(data) {
                    if (data != 0) {
                        return data;
                    }
                    return "N/A";
                }
            },
            // {
            //     "data": "capstan",
            //     "name": 'capstan',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },
            {
                "data": "others",
                "name": 'others',
                "render": function(data) {
                    if (data != 0) {
                        return data;
                    }
                    return "N/A";
                }
            }, {
                "data": "flake",
                "name": 'flake',
                "render": function(data) {
                    if (data != 0) {
                        return data;
                    }
                    return "N/A";
                }
            },
            // {
            //     "data": "special",
            //     "name": 'special',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // }, {
            //     "data": "silkCut",
            //     "name": 'silkCut',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // }, {
            //     "data": "gfss",
            //     "name": 'gfss',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },

            // {
            //     "data": "gfssMint",
            //     "name": 'gfssMint',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },
            {
                "data": "players",
                "name": 'players',
                "render": function(data) {
                    if (data != 0) {
                        return data;
                    }
                    return "N/A";
                }
            },
            // {
            //     "data": "berkeley",
            //     "name": 'berkeley',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },
            // {
            //     "data": "charms",
            //     "name": 'charms',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },
            // {
            //     "data": "charminar",
            //     "name": 'charminar',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },
            // {
            //     "data": "filter",
            //     "name": 'filter',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },
            // {
            //     "data": "american",
            //     "name": 'american',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },
            // {
            //     "data": "editions",
            //     "name": 'editions',
            //     "render": function(data) {
            //         if (data != 0) {
            //             return data;
            //         }
            //         return "N/A";
            //     }
            // },
            {
                "data": "last_time",
                "name": 'last_time'
            },
        ];

        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: {
                "url": tu,
                data: function(d) {
                    d.filter = $('.showWithdrawalOnclick').val(),
                        d.location = jQuery('.searchLocation').children('option:selected').val()
                }
            },
            columns: cols,
            order: order,
        });

        jQuery(document).on('change', ".showWithdrawalOnclick", function() {
            filter = jQuery(this).val();
            list_table_tab.draw();
        });

        jQuery(document).on('change', ".searchLocation", function() {
            newlocation = jQuery(this).children('option:selected').val();
            list_table_tab.draw();
        });
    });
</script>
@endsection