@if($payoutReleasedData->count())
    {{--    <div class="table-responsive">--}}
    {{--        <table class="table table-striped table-bordered table-hover reporttable" style="width: 100%;">--}}
    <form class="filterForm">
        <div class="row">
            <div class="col-md-12 outerWrapper">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover dataTable dtr-inline reporttable"
                           role="grid"
                           aria-describedby="sample_1_info" style="width: 100%;">
                        <thead>
                        <tr>
                            <th> {{ _mt($moduleId,'ManualPayout.batch_no') }}</th>
                            <th> {{ _mt($moduleId,'ManualPayout.total_users') }}</th>
                            <th> {{ _mt($moduleId,'ManualPayout.total_amount') }}</th>
                            <th> {{ _mt($moduleId,'ManualPayout.status') }}</th>
                            <th> {{ _mt($moduleId,'ManualPayout.date') }}</th>
                            <th> {{ _mt($moduleId,'ManualPayout.action') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($payoutReleasedData as $payout)
                            <tr>
                                <td> {{ $payout->id }} </td>
                                <td> {{ $payout->users_count }} </td>
                                <td> {{ currency($payout->total_amount) }} </td>
                                <td> {{ ucwords($payout->status) }} </td>
                                <td> {{ date('Y-m-d',strtotime($payout->created_at)) }} </td>

                                <td style="width: 250px;">
                                    <button type="button" class="btn btn-success ladda-button downloadExcel"
                                            data-transaction-id="{{ $payout->id }}"
                                            style="display: inline-block !important;">
                                        <i class="fa fa-download"></i>
                                        {{ _mt($moduleId, 'ManualPayout.download') }}
                                    </button>
                                    <button class="btn btn-primary ladda-button viewPayouts" type="button"
                                            data-id="{{$payout->id}}" data-slNo="{{$loop->iteration}}"
                                            style="display: inline-block !important;">
                                        <i class="fa fa-eye ladda-button"></i>{{ _mt($moduleId, 'ManualPayout.view') }}
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="6" style="padding:0px 20px;border: 0px;">
                                    <div id="userPayoutView_{{ $payout->id }}" class="userPayoutView"
                                         style="display: none;"></div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    {{--        <div class="col-md-12 " style="padding: 0px;"></div>--}}
                </div>
                <div class="paginationWrapper">
                    {!! $payoutReleasedData->links() !!}
                </div>
        @else
            {{ _mt($moduleId,'ManualPayout.no_data_found') }}
        @endif
    </form>

    <script type="text/javascript">

        $('.paginationWrapper .pagination li a').click(function (e) {
            e.preventDefault();
            var route = $(this).attr('href');
            fetchPayoutReport(route);
        });

        // Download report as Excel
        $('.downloadExcel').click(function () {
            var transactionId = $(this).data('transaction-id');
            $.post('{{ scopeRoute('manualPayout.report.download.excel') }}', {
                transaction_id: transactionId,
            }, function (response) {
                window.open(response.link);
            });
        });
        $(document).ready(function () {
            // Initialize Ladda buttons
            Ladda.bind('.ladda-button');

            $('.viewPayouts').click(function () {
                var payoutId = $(this).data('id');
                var slNo = $(this).data('slno');
                var payoutView = $('#userPayoutView_' + payoutId);
                var button = $(this);
                if (payoutView.is(':visible')) {
                    payoutView.hide();
                    setTimeout(function () {
                        Ladda.stopAll();
                    }, 100);
                    button.removeClass('active');
                } else {
                    var route = '{{ scopeRoute('manualPayout.viewUsersList') }}';
                    $.post(route, {transaction_id: payoutId, sl_no: slNo}, function (response) {
                        payoutView.html(response);
                        payoutView.show();
                        setTimeout(function () {
                            Ladda.stopAll();
                        }, 100);
                        button.addClass('active');
                    });
                }
            });
        });

    </script>

    <style>

    </style>