@extends('voyager::master')

@section('page_title', 'Merchant')

@section('page_header')
    <div class="page-header">
        <div class="row align-items-center py-2">
            <div class="col-sm mb-2 mb-sm-0">
                <div class="d-flex align-items-center">
                    <img class="onerror-image" data-onerror-image="{{ asset('thumb.png') }}" src="{{ asset('thumb.png') }}"
                        width="38" alt="img">
                    <div class="w-0 flex-grow pl-2">
                        <h1 class="page-header-title mb-0">{{ __('wallet.title') }}</h1>
                        <p class="page-header-text m-0">{{ __('wallet.sub_title') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('content')

    @include('_partials.alerts')

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-bordered">
                <div class="panel-body">

                    <div class="d-flex justify-content-end pr-3">
                        @include('vendor.voyager.address-management.include.filter')
                    </div>

                    <table id="dataTable" class="table table-hover">
                        <thead>
                            <tr>
                                <th>{{ __('datatable.sn') }}</th>
                                <th>{{ __('datatable.reference_number') }}</th>
                                <th>{{ __('datatable.wallet_id') }}</th>
                                <th>{{ __('datatable.type') }}</th>
                                <th>{{ __('voyager::form.lyd_amount') }}</th>
                                <th>{{ __('datatable.trx_type') }}</th>
                                <th>{{ __('datatable.state') }}</th>
                                <th>{{ __('datatable.date') }}</th>
                                <th>{{ __('datatable.description') }}</th>
                                <th>{{ __('datatable.notes') }}</th>
                                <th class="no-export currentBalance">{{ __('datatable.current_balance') }}</th>
                                <th class="no-export availableBalance">{{ __('datatable.available_balance') }}</th>
                                <th>{{ __('datatable.running_balance') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="sn"></td>
                                <td class="rfm"></td>
                                <td class="wallet-n"></td>
                                <td class="type"></td>
                                <td class="amount"></td>
                                <td class="trx-type"></td>
                                <td class="state"></td>
                                <td class="date"></td>
                                <td class="desc"></td>
                                <td class="notes"></td>
                                <td class="availableBalance"></td>
                                <td class="currentBalance"></td>
                                <td class="rnb"></td>
                            </tr>
                        </tbody>

                        <tfoot>
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th>Total: <span id="currentBalanceTotal"></span></th>
                                <th>Total: <span id="availableBalanceTotal"></span></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @include('paynow.agents.fields')
@stop

@section('css')

    <style>
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #007bff;
            color: #fff;
            border-color: #007bff;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #007bff;
            color: #fff;
            border-color: #007bff;
        }
    </style>

@stop

@section('javascript')

    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
    <script>
        $(document).ready(function() {
            var searchLabel = "@lang('datatable.sSearch')";
            var lengthMenuLabel = "@lang('datatable.sLengthMenu')";
            var infoLabel = "@lang('datatable.sInfo')";
            var infoEmptyLabel = "@lang('datatable.sInfoEmpty')";
            var infoFilteredLabel = "@lang('datatable.sInfoFiltered')";
            var loadingRecordsLabel = "@lang('datatable.sLoadingRecords')";
            var processingLabel = "@lang('datatable.sProcessing')";
            var zeroRecordsLabel = "@lang('datatable.sZeroRecords')";

            var firstLabel = "@lang('datatable.oPaginate.sFirst')";
            var lastLabel = "@lang('datatable.oPaginate.sLast')";
            var nextLabel = "@lang('datatable.oPaginate.sNext')";
            var previousLabel = "@lang('datatable.oPaginate.sPrevious')";

            var sortAscendingLabel = "@lang('datatable.oAria.sSortAscending')";
            var sortDescendingLabel = "@lang('datatable.oAria.sSortDescending')";

            try {
                var emptyTypeArray = [];

                try {
                    var table = $('#dataTable').DataTable({
                        processing: true,
                        serverSide: true,
                        searching: true,
                        paging: true,
                        pagingType: 'full_numbers',
                        lengthMenu: [10, 25, 50, 100],
                        dom: 'Bfrtip',
                        order: [
                            [7, 'desc']
                        ],
                        "columnDefs": [{
                            "targets": [7],
                            "type": "datetime-dmy"
                        }],
                        language: {
                            search: searchLabel,
                            lengthMenu: lengthMenuLabel,
                            info: infoLabel,
                            infoEmpty: infoEmptyLabel,
                            infoFiltered: infoFilteredLabel,
                            loadingRecords: loadingRecordsLabel,
                            processing: processingLabel,
                            zeroRecords: zeroRecordsLabel,
                            paginate: {
                                first: firstLabel,
                                last: lastLabel,
                                next: nextLabel,
                                previous: previousLabel
                            },
                            aria: {
                                sortAscending: sortAscendingLabel,
                                sortDescending: sortDescendingLabel
                            }
                        },
                        buttons: [{
                                extend: 'excel',
                                text: '<i class="tio-download"></i> {{ __('datatable.buttons.export_csv') }}',
                                titleAttr: '{{ __('datatable.buttons.export_csv_title') }}'
                            },
                            {
                                extend: 'print',
                                text: '<i class="tio-print"></i> {{ __('datatable.buttons.print_save') }}',
                                titleAttr: '{{ __('datatable.buttons.print') }}',
                                customize: function(win) {
                                    $(win.document.body).addClass('white-bg');
                                    $(win.document.body).css('font-size', '10px');

                                    var isArabic = "{{ app()->getLocale() }}" === "ar";
                                    var textAlign = isArabic ? 'right' : 'left';
                                    var direction = isArabic ? 'rtl' : 'ltr';

                                    $(win.document.body).css('direction', direction);

                                    $(win.document.body).find('table').addClass('compact').css({
                                        'font-size': 'inherit',
                                        'width': '100%'
                                    });

                                    $(win.document.body).find('th, td').css('text-align', textAlign);

                                    $(win.document.body).find('thead').addClass('thead-print');
                                },
                                exportOptions: {
                                    columns: ':not(.no-export)'
                                }
                            }
                        ],
                        ajax: {
                            url: "http://127.0.0.1:8000/admin/wallet/accounting-entries-server-side",
                            data: function(d) {
                                $('#filterForm').serializeArray().forEach(function(field) {
                                    d[field.name] = field.value;
                                });
                            },
                            dataSrc: function(response) {
                                updateFooter(response);

                                if (response.filteredData && Array.isArray(response.filteredData)) {
                                    return response.filteredData;
                                } else {
                                    toastr.error(
                                        "No data found or invalid response. Please try again.");
                                    return [];
                                }
                            },
                            error: function(xhr, error, thrown) {
                                toastr.error("No data found or invalid response. Please try again.");
                            }
                        },
                        columns: [{
                                data: 'id',
                                render: function(data, type, row, meta) {
                                    return meta.row + 1;
                                }
                            },
                            {
                                data: 'referenceNo'
                            },
                            {
                                data: 'walletId'
                            },
                            {
                                data: 'type'
                            },
                            {
                                data: 'amount'
                            },
                            {
                                data: 'transactionSign',
                                render: function(data, type, row) {
                                    return data === 'DR' ?
                                        'Debit' :
                                        (data === 'CR' ?
                                            'Credit' :
                                            (data || ''));
                                }
                            },
                            {
                                data: 'transactionType'
                            },
                            {
                                data: 'createdAt'
                            },
                            {
                                data: 'description'
                            },
                            {
                                data: 'remarks'
                            },
                            {
                                data: 'currentBalance',
                                visible: false
                            },
                            {
                                data: 'availableBalance',
                                visible: false
                            },
                            {
                                data: 'runningBalance'
                            }
                        ],
                        createdRow: function(row, data) {
                            $(row).find('td').wrapInner('<a href="transaction-detail/' + data
                                .referenceNo + '"></a>');
                        },
                        footerCallback: function(row, data, start, end, display) {
                            var api = this.api();

                            updateFooterTotals(api);
                        }
                    });

                    $('table.dataTable tfoot th').css({
                        'border-top': '1px solid #ddd',
                        'padding': '10px 18px 6px'
                    });

                    $('.dataTables_wrapper tfoot').show();

                    $(document).on('submit', '#filterForm', function(e) {
                        e.preventDefault(); // Prevent the default form submission
                        var walletId = $('#walletId').val();
                        if (walletId) {
                            table.column(10).visible(true);
                        }
                        table.ajax.reload();
                    });

                } catch (error) {
                    toastr.error("An error occurred while initializing the table. Please try again.");
                }
            } catch (error) {
                toastr.error("An error occurred while loading the page. Please try again.");
            }

            function formatNumber(num) {
                return num.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            function updateFooterTotals(api) {
                var currentBalanceTotal = api.column(10, {
                        page: 'current'
                    }).data()
                    .reduce(function(a, b) {
                        return parseFloat(a) + parseFloat(b);
                    }, 0);

                var availableBalanceTotal = api.column(11, {
                        page: 'current'
                    }).data()
                    .reduce(function(a, b) {
                        return parseFloat(a) + parseFloat(b);
                    }, 0);

                $(api.column(10).footer()).html(' {{ __('dashboard.dashboard.cashout_statistics.total') }}: ' +
                    formatNumber(currentBalanceTotal.toFixed(2)));
                $(api.column(11).footer()).html(' {{ __('dashboard.dashboard.cashout_statistics.total') }}: ' +
                    formatNumber(availableBalanceTotal.toFixed(2)));
            }

            function updateFooter(response) {
                $('#dataTable').DataTable().column(5).footer().innerHTML = formatNumber(response
                    .currentBalanceTotal);
                $('#availableBalanceTotal').html(formatNumber(response.availableBalanceTotal));
            }
        });
    </script>
@stop