@include('layout.header')
<style>
    .hover_bg .dataTables_scrollBody table tbody tr:first-child {
        background: #f2f1ff;
    }

    .hover_bg .dataTables_scrollBody table tbody tr:nth-child(2) {
        background: #eae9ff;
    }

    .hover_bg .dataTables_scrollBody table tbody tr:nth-child(3) {
        background: #f2f1ff;
    }

    .hover_bg .dataTables_scrollBody table tbody tr:nth-child(4) {
        background: #eae9ff;
    }
</style>

<div id="tab-4" class="tab-content ">
    <div class="row">
        <div class="col-12">
            <div class="white_shadow_rs">
                <table id="dataTable_2" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Group Name</th>
                            <th>Hat Name</th>
                            <th>BE Name</th>
                            <th>HQ Name</th>
                            <th>RX Points</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<div id="tab-4" class="tab-content hover_bg">
    <div class="row">
        <div class="col-12">
            <div class="white_shadow_rs">
                <table id="dataTable" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Team</th>
                            <th>Total Matches</th>
                            <th>Total Win</th>
                            <th>Total Lose</th>
                            <th>Rx Points</th>
                            <th>Match Points</th>
                            <th>Total Points</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</div>
</section>
</div>



@include('layout.footer')


<script>
    // $('.dataTables_info').hide();
    $(function() {
        var columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                "orderable": false,
                searchable: false
            },


            {
                data: 'team_name',
            },
            {
                data: 'total_play',
            },
            {
                data: 'total_win',
            },
            {
                data: 'total_lose',
                name: 'total_lose'
            },

            {
                data: 'rx_point',
            },
            {
                data: 'match_point',
            },
            {
                data: 'total_point',
                name: 'total_point'
            }
        ];

        var columns_2 = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                "orderable": false,
                searchable: false
            },


            {
                data: 'group_name',
            },
            {
                data: 'hat_name',
            },
            {
                data: 'emp_name',
            },
            {
                data: 'hq',
            },
            {
                data: 'rx',
            },
        ];
        var columnDefs = [];
        var columnDefs_2 = [];
        getdatatable("{{ route('teamLeaderBoard.paginate') }}", columns, columnDefs);
        getdatatable_2("{{ route('teamLeaderBoard_group.paginate') }}", columns_2, columnDefs_2);
    });

    function getdatatable(url, columns, columnDefs) {
        $('#dataTable').DataTable({
            processing: true,
            serverSide: true,
            bDestroy: true,
            pageLength: 25,
            order: [],
            stateSave: true,
            info: false,
            "dom": 'lrtip',
            "scrollX": true,
            columns: columns,
            columnDefs: columnDefs,
            paging: false,
            // ajax: "{{ url('participant-paginate') }}",
            ajax: {
                method: 'post',
                url: url,
                data: function(d) {

                    d._token = "{{ csrf_token() }}"
                }
            },
            // "drawCallback": function(settings) {
            //     new VenoBox({
            //         selector: '.venobox_img',
            //     });
            //     feather.replace();
            // }
        });
    }

    function getdatatable_2(url, columns, columnDefs) {
        $('#dataTable_2').DataTable({
            processing: true,
            serverSide: true,
            bDestroy: true,
            pageLength: 25,
            order: [],
            stateSave: true,
            info: false,
            "dom": 'lrtip',
            "scrollX": true,
            columns: columns,
            columnDefs: columnDefs,
            paging: false,
            // ajax: "{{ url('participant-paginate') }}",
            ajax: {
                method: 'post',
                url: url,
                data: function(d) {

                    d._token = "{{ csrf_token() }}"
                }
            },
            // "drawCallback": function(settings) {
            //     new VenoBox({
            //         selector: '.venobox_img',
            //     });
            //     feather.replace();
            // }
        });
    }
</script>