@extends('layouts.admin')
@section('content')

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <div class="card">
        <div class="card-header">
            {{ trans('cruds.seller_wallet.list') }}
        </div>
        <!-- Filter Form -->
        <div id="export-button" class="pl-4">
            <!-- <button class="btn-sm btn btn-primary" id="export-all" type="button" style="margin-right: 10px;">
                {{ trans('cruds.seller_wallet.export_all') }}
            </button>
            <button disabled class="btn-sm btn btn-primary" id="export-selected" type="button">
                {{ trans('cruds.seller_wallet.export_selected') }}
            </button> -->
            <div>
                <form method="post" action="{{route('admin.seller_wallet.import_seller_wallet')}}" enctype="multipart/form-data" class="d-flex align-items-center justify-content-center py-3 rounded" style="border: 1px solid #6e0808;margin: 20px 200px; border-radius: 5px;">
                    @csrf
                    <div>
                        <input type="file" name="import_file" style="margin: 10px 0;">
                    </div>
                    <div>
                        <button class="btn-sm btn btn-primary" id="import-wallet" type="submit" style="margin-right: 10px;">
                            {{ trans('cruds.seller_wallet.submit') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div id="filter-form">
            <div class="card-header border-0">
                <div class="card-title w-100">
                    <div class="row g-3 justify-content-end align-items-end mb-md-2">
                        <div class="col-md-3 row">
                            <button class="btn-sm btn col-md-5 btn-primary" id="export-all" type="button" style="margin-right: 10px;">
                                {{ trans('cruds.seller_wallet.export_all') }}
                            </button>
                            <button disabled class="btn-sm btn col-md-6 btn-primary" id="export-selected" type="button">
                                {{ trans('cruds.seller_wallet.export_selected') }}
                            </button>
                        </div>
                        <div class="col-md-2">
                            <label for="name" class="form-label">{{ trans('cruds.seller_wallet.fields.user') }}</label>
                            <input type="text" class="form-control"
                                placeholder="{{ trans('cruds.seller_wallet.fields.user') }}" id="name" />
                        </div>
                        <div class="col-md-2 ">
                            <label for="full_phone" class="form-label">{{ trans('cruds.seller_wallet.fields.phone') }}</label>
                            <input type="text" class="form-control "
                                placeholder="{{ trans('cruds.seller_wallet.fields.phone') }}" id="full_phone" />
                        </div>
                        <div class="col-md-3 ">
                            <label for="form_current_balance"
                                class="form-label">{{ trans('cruds.seller_wallet.fields.current_balance') }}</label>
                            <div class="d-flex align-items-center">
                                <input type="number" class="form-control "
                                    placeholder="{{ trans('cruds.seller_wallet.fields.from_current_balance') }}"
                                    id="form_current_balance" />
                                <span class="ml-2 mr-2">To</span>
                                <input type="number" class="form-control "
                                    placeholder="{{ trans('cruds.seller_wallet.fields.to_current_balance') }}"
                                    id="to_current_balance" />
                            </div>
                        </div>
                        <div class="col-md-2  d-flex align-items-end">
                            <button class="btn-sm btn btn-danger" id="cencle-btn" type="button"
                                style=" margin-right: 10px;">
                                {{ trans('cruds.seller_wallet.discard') }}
                            </button>
                            <button class="btn-sm btn btn-primary" id="filter-btn" type="button" style="">
                                {{ trans('cruds.seller_wallet.search') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body">
            <table class=" table table-bordered  table-hover ajaxTable datatable datatable-Make">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all"></th>
                        <th>
                            {{ trans('cruds.seller_wallet.fields.id') }}
                        </th>
                        <th>
                            {{ trans('cruds.seller_wallet.fields.user') }}
                        </th>
                        <th>
                            {{ trans('cruds.seller_wallet.fields.phone') }}
                        </th>
                        <th>
                            {{ trans('cruds.seller_wallet.fields.current_balance') }}
                        </th>
                        <th>
                            {{ trans('cruds.seller_wallet.fields.pending_balance') }}
                        </th>
                        <th>
                            {{ trans('cruds.seller_wallet.fields.last_withdrawal') }}
                        </th>
                        <th>
                            {{ trans('cruds.seller_wallet.fields.total_earnings') }}
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection
@section('scripts')
    @parent
    <script>
        $(function () {
            let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons);
            let selectedRows = new Set();
            let dtOverrideGlobals = {
                buttons: [],
                processing: true,
                serverSide: true,
                searching: false,
                retrieve: true,
                aaSorting: [],
                ajax: {
                    url: "{{ route('admin.seller-wallet.index') }}",
                    data: function (d) {
                        d.name = $('#name').val();
                        d.full_phone = $('#full_phone').val();
                        d.form_current_balance = $('#form_current_balance').val();
                        d.to_current_balance = $('#to_current_balance').val();
                    }
                },
                columns: [
                    {
                        data: 'id',
                        name: 'id',
                        render: function (data, type, row) {
                            let checked = selectedRows.has(data.toString()) ? 'checked' : ''; // Keep selection state
                            return `<input type="checkbox" class="row-checkbox" value="${data}" ${checked}>`;
                        },
                        orderable: false,
                        searchable: false
                    },
                    { data: 'id', name: 'id' },
                    { data: 'user', name: 'name' },
                    { data: 'phone', name: 'full_phone' },
                    { data: 'current_balance', name: 'current_balance' },
                    { data: 'pending_balance', name: 'pending_balance' },
                    { data: 'last_withdrawal', name: 'last_withdrawal' },
                    { data: 'total_earnings', name: 'total_earnings' }
                ],
                orderCellsTop: true,
                order: [[0, 'desc']],
                pageLength: 10,
                dom: '<"export_btn"B><"table-responsive"t><"row justify-content-between mt-2"<"col-sm-2 mt-2"l><"col-sm-2"i><"col-sm-8 d-flex justify-content-end"p>>',
                select: {
                    style: 'multi', // Enable multi-row selection
                    selector: 'td:first-child input[type="checkbox"]' // Apply selection only to the first column checkboxes
                },
            };
            let table = $('.datatable-Make').DataTable(dtOverrideGlobals);

            $('a[data-toggle="tab"]').on('shown.bs.tab click', function (e) {
                $($.fn.dataTable.tables(true)).DataTable()
                    .columns.adjust();
            });
            $('#filter-btn').click(function () {
                table.ajax.reload(); // Reload DataTable with new filters
            });

            $('#cencle-btn.btn-danger').click(function () {
                $('#name').val('');
                $('#full_phone').val('');
                $('#form_current_balance').val('');
                $('#to_current_balance').val('');
                table.ajax.reload();
            });

            $(document).on('change', '#select-all', function () {
                let isChecked = $(this).prop('checked');

                if (isChecked) {
                    // Select all rows across all pages
                    table.rows().every(function () {
                        let rowData = this.data();
                        selectedRows.add(rowData.id.toString()); // Store as string for consistency
                    });
                    $('#export-selected').prop('disabled', false);
                } else {
                    // Deselect all rows
                    selectedRows.clear();
                    $('#export-selected').prop('disabled', true);
                }

                // Update checkboxes on the current page
                $('.row-checkbox').prop('checked', isChecked);
            });

            // Handle individual row selection
            $(document).on('change', '.row-checkbox', function () {
                let rowId = $(this).val();

                if ($(this).prop('checked')) {
                    selectedRows.add(rowId);
                } else {
                    selectedRows.delete(rowId);
                }

                // Check if all rows across all pages are selected
                let allRowsCount = table.rows().count();
                let selectedCount = selectedRows.size;
                if (selectedCount > 0) {
                    $('#export-selected').prop('disabled', false);
                } else {
                    $('#export-selected').prop('disabled', true);
                }
                $('#select-all').prop('checked', allRowsCount === selectedCount);
            });

            // Maintain selection across pagination
            table.on('draw', function () {
                $('.row-checkbox').each(function () {
                    if (selectedRows.has($(this).val())) {
                        $(this).prop('checked', true);
                    }
                });

                // Ensure "Select All" is checked if all rows are selected across pages
                let allRowsCount = table.rows().count();
                let selectedCount = selectedRows.size;
                $('#select-all').prop('checked', allRowsCount === selectedCount);
            });

            // Get all selected rows (For API calls or form submission)
            function getSelectedRowIds() {
                return Array.from(selectedRows);
            }
            $('#export-selected').click(function () {
                let filters = {
                    selectedIds: getSelectedRowIds()// Send selected IDs
                };

                let query = $.param(filters);
                window.location.href = "{{ route('admin.seller_wallet.export_seller_wallet') }}?" + query;
            });
        });

    </script>
    <script>
        $(document).ready(function () {
            $('#export-all').click(function () {
                let filters = {
                    name: $('#name').val(),
                    full_phone: $('#full_phone').val(),
                    form_current_balance: $('#form_current_balance').val(),
                    to_current_balance: $('#to_current_balance').val(),
                };

                let query = $.param(filters);
                window.location.href = "{{ route('admin.seller_wallet.export_seller_wallet') }}?" + query;
            });
        });  
    </script>
@endsection