@extends('layouts.app')

@section('title')
    {{ __('Danh sách tài khoản') }}
@endsection

@section('list_account')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Danh sách tài khoản') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.index') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Danh sách tài khoản') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('Danh sách') }}</h3>
                <div class="card-tools">
                    <button class="btn btn-sm btn-secondary d-none" id="deleteAllBtn">
                        Xoá
                    </button>
                    <button class="btn btn-sm btn-danger d-none" id="turnOffState">
                        Tắt
                    </button>
                    <button class="btn btn-sm btn-success d-none" id="turnOnState">
                        Bật
                    </button>

                    <a class="btn btn-sm btn-success" href="{{ route('app.supporter.createAccount') }}"><i
                            class="fas fa-add"></i>
                        {{ __('Thêm tài khoản') }}</a>
                </div>
            </div>
            <div id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
            </div>
            @if (Session::has('success'))
                <div id="message-alert" class="alert alert-success">
                    {{ Session::get('success') }}
                </div>
            @endif
            @if (Session::has('error'))
                <div id="message-alert" class="alert alert-danger">
                    {{ Session::get('error') }}
                </div>
            @endif
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped dt-column-filters" id="listAccounts">
                        <thead style="text-align: center">
                            <tr>
                                <th><input type="checkbox" name="main_checkbox" class="wide-checkbox"><label></label></th>
                                <th class="hidden">{{ __('ID') }}</th>
                                <th class="filter-container">
                                    {{ __('type') }}
                                    <button class="btn btn-sm btn-link" id="typeFilterBtn" title="Bộ lọc">
                                        <i class="fa fa-filter"></i>
                                    </button>
                                    <div class="filter-popup" style="display: none;">
                                        <select id="typeFilterSelect" class="form-control">
                                            <option value="">Tất cả</option>
                                            @foreach (\App\Models\Bank\Bank::query()->select(['name', 'display_name'])->get() as $value)
                                                <option value="{{ $value->name }}">{{ $value->display_name }}</option>
                                            @endforeach
                                        </select>
                                        <button class="btn btn-sm btn-primary" id="applyFilterBtn">Áp dụng</button>
                                    </div>

                                </th>
                                <th>{{ __('account') }}</th>
                                <th>
                                    {{ __('identify') }}
                                    <button class="btn btn-sm btn-link" id="identifyFilterBtn" title="Bộ lọc">
                                        <i class="fa fa-filter"></i>
                                    </button>
                                    <div class="identify-filter-popup" style="display: none;">
                                        <select id="identifyFilterSelect" class="form-control">
                                            <option value="">Tất cả</option>
                                            @foreach (IDENTIFY as $key => $value)
                                                <option value="{{ $value }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        <button class="btn btn-sm btn-primary" id="applyIdentifyFilterBtn">Áp dụng</button>
                                    </div>
                                </th>
                                <th>{{ __('balance') }}</th>
                                <th>{{ __('remaining_month_day') }}</th>
                                <th>{{ __('remaining_limit_month') }}</th>
                                <th>
                                    {{ __('account_type') }}
                                    <button class="btn btn-sm btn-link" id="accountTypeFilterBtn" title="Bộ lọc">
                                        <i class="fa fa-filter"></i>
                                    </button>
                                    <div class="account-type-filter-popup" style="display: none;">
                                        <select id="accountTypeFilterSelect" class="form-control">
                                            <option value="">Tất cả</option>
                                            @foreach (BANK_ACCOUNT_TYPE as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        <button class="btn btn-sm btn-primary" id="applyAccountTypeFilterBtn">Áp
                                            dụng</button>
                                    </div>
                                </th>
                                <th>
                                    {{ __('status') }}
                                    <button class="btn btn-sm btn-link" id="statusFilterBtn" title="Bộ lọc">
                                        <i class="fa fa-filter"></i>
                                    </button>
                                    <div class="status-filter-popup" style="display: none;">
                                        <select id="statusFilterSelect" class="form-control">
                                            <option value="">Tất cả</option>
                                            @foreach (ACCOUNT_STATUS as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        <button class="btn btn-sm btn-primary" id="applyStatusFilterBtn">Áp dụng</button>
                                    </div>
                                </th>
                                <th>{{ __('Tình trạng') }}</th>
                                <th>{{ __('created_date') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="transactionHistoryModal" tabindex="-1" aria-labelledby="transactionHistoryModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="transactionHistoryModalLabel">
                            {{ __('Truy vấn tài khoản') }} <span style="color: red">{{ __('Số dư: ') }}</span> <span
                                id="data-account" style="color: red"></span></h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <form id="search-transaction-history" class="col-lg-10 row">
                                        @csrf
                                        <div class="col-lg-2">
                                            <div class="form-group">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">{{ __('from_date') }}</span>
                                                    </div>
                                                    <input type="date" class="form-control" name="from_date">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="form-group">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">{{ __('to_date') }}</span>
                                                    </div>
                                                    <input type="date" class="form-control" name="to_date">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="form-group">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">{{ __('Limit') }}</span>
                                                    </div>
                                                    <select name="limit" id="limit">
                                                        <option value="20">20</option>
                                                        <option value="50">50</option>
                                                        <option value="100">100</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <button type="submit" class="btn btn-primary" id="btn-search"><i
                                                    class="fa fa-search"></i>{{ __('search') }}</button>
                                        </div>
                                    </form>
                                    <div class="col-lg-1">
                                        <button class="btn btn-primary" id="prevButton">Previous</button>
                                    </div>
                                    <div class="col-lg-1">
                                        <button class="btn btn-primary" id="nextButton">Next</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="transactionHistoryContent"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="securityModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{{ __('Nhập mã bảo mật') }}</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12">
                            <form class="row" method="POST" action="" id="secret-code-form">
                                @csrf
                                <div class="input-group mb-3">
                                    <input type="password" name="secret_code" class="form-control"
                                        placeholder="Nhập mã bảo mật">
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-lock"></span>
                                        </div>
                                    </div>
                                    @error('secret_code')
                                        <span class="text-danger">* {{ $message }}</span>
                                    @enderror
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-outline-success"
                            id="confirmSecretCode">{{ __('Xác nhận') }}</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- modal show when relogin --}}
        <div class="modal fade" id="reloginWithOTPModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{{ __('Đăng nhập lại tài khoản') }}</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12">
                            <form class="row" method="POST" action="" id="relogin-with-otp-form">
                                @csrf
                                <div class="col-lg-8">
                                    <div class="form-group">
                                        <input type="number" class="form-control" name="otp"
                                            placeholder="{{ __('Nhập OTP') }}">
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <a href="#" id="btn-relogin-sent-otp"
                                        class="btn btn-secondary">{{ __('Gửi OTP') }}</a>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-outline-success"
                            id="btn-submit-relogin-otp">{{ __('Xác nhận') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="reloginWithPasswordModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{{ __('Đăng nhập lại tài khoản') }}</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12">
                            <form class="row" method="POST" action="" id="relogin-with-password-form">
                                @csrf
                                <div class="col-lg-12">
                                    <input type="password" class="form-control" name="password" id="confirm_otp"
                                        placeholder="{{ __('Nhập mật khẩu') }}">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-outline-success"
                            id="btn-submit-relogin-password">{{ __('Xác nhận') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
    <script type="text/javascript"
        src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $(document).on('click', '.showTransactionHistoryBtn', function() {
                showLoadingOverlay();
                var bankAccountId = $(this).data('bank-account-id');
                var currentOffset = 0;
                var dataTable = $('#transactionDataTable').DataTable();
                initializeDataTable();

                function initializeDataTable() {
                    showLoadingOverlay();
                    currentOffset = 0;
                    if ($.fn.DataTable.isDataTable('#transactionDataTable')) {
                        dataTable.destroy();
                    }
                    fetchTransactionHistory(currentOffset, 20, null, null);
                }

                function fetchTransactionHistory(offset, limit, startDate, endDate) {
                    $.ajax({
                        url: 'transaction-history/' + bankAccountId,
                        type: 'GET',
                        dataType: 'json',
                        data: {
                            start_date: startDate,
                            end_date: endDate,
                            offset: offset,
                            limit: limit
                        },
                        success: function(data) {
                            if (data.success) {
                                $('#data-account').html(numberFormat(data.data.balance) +
                                    " VNĐ");
                                var transactions = data.data.transactions;
                                if (transactions == null || transactions.length == 0) {
                                    hideLoadingOverlay();
                                    toastr.error('Thất bại', 'Không có lịch sử giao dịch nào');
                                }
                                var content =
                                    '<table id="transactionDataTable" class="table table-bordered table-striped">';
                                content +=
                                    '<thead style="text-align: center"><tr><th>Mã giao dịch</th><th>Số tiền</th><th>Loại giao dịch</th><th>Phí</th><th>Nội dung</th><th>Thời gian</th><th>Trạng thái</th></tr></thead>';
                                content += '<tbody style="text-align: center">';
                                for (var i = 0; i < transactions.length; i++) {
                                    var transaction = transactions[i];
                                    content += '<tr>';
                                    content += '<td>' + transaction['transaction_id'] +
                                        '</td>';
                                    content += '<td>' + numberFormat(transaction['amount']) +
                                        '</td>';
                                    content += '<td>' + (transaction['io'] == 1 ?
                                            '<span class="badge bg-primary">Nhận tiền</span>' :
                                            '<span class="badge bg-secondary">Chuyển tiền</span>'
                                        ) +
                                        '</td>';
                                    content += '<td>' + numberFormat(transaction['fee']) +
                                        '</td>';
                                    content += '<td>' + transaction['content'] + '</td>';
                                    content += '<td>' + formatTimeHistory(transaction[
                                            'trans_time']) +
                                        '</td>';
                                    content += '<td>' + (transaction['status'] == 0 ?
                                            '<span class="badge bg-danger">Lỗi</span>' :
                                            '<span class="badge bg-success">Thành công</span>'
                                        ) +
                                        '</td>';
                                    content += '</tr>';
                                }
                                content += '</tbody>';
                                content += '</table>';
                                $('#transactionHistoryContent').empty();
                                document.getElementById('transactionHistoryContent').innerHTML =
                                    content;
                                $('#transactionHistoryModal').modal('show');
                                hideLoadingOverlay();
                                var transactionDataTable = $('#transactionDataTable')
                                    .DataTable({
                                        pageLength: limit,
                                        aLengthMenu: [
                                            [limit],
                                            [limit]
                                        ],
                                        order: [
                                            [5, 'desc']
                                        ],
                                    });
                                transactionDataTable.on('search.dt', function() {
                                    var recordsTotal = transactionDataTable.rows({
                                        search: 'applied'
                                    }).count();
                                    // Kiểm tra nếu không có bản ghi nào sau khi tìm kiếm
                                    if (recordsTotal === 0) {
                                        var transaction_id = transactionDataTable
                                            .search();

                                        // Gọi API khác để tìm kiếm
                                        $.ajax({
                                            url: "{{ route('app.transaction_history.transactionId') }}",
                                            method: 'GET',
                                            data: {
                                                transaction_id: transaction_id,
                                                bank_account_id: bankAccountId
                                            },
                                            success: function(response) {
                                                if (response.success) {
                                                    response.data.forEach(
                                                        function(item) {
                                                            var ioText =
                                                                (item
                                                                    .io ===
                                                                    -1
                                                                ) ?
                                                                '<span class="badge bg-secondary">Chuyển tiền</span>' :
                                                                '<span class="badge bg-primary">Nhận tiền</span>';
                                                            var statusText =
                                                                (item
                                                                    .status ===
                                                                    0) ?
                                                                '<span class="badge bg-danger">Lỗi</span>' :
                                                                '<span class="badge bg-success">Thành công</span>';
                                                            transactionDataTable
                                                                .row
                                                                .add([
                                                                    item
                                                                    .transaction_id,
                                                                    item
                                                                    .amount,
                                                                    ioText,
                                                                    item
                                                                    .fee,
                                                                    item
                                                                    .content,
                                                                    item
                                                                    .trans_time,
                                                                    statusText,
                                                                    "Wait"
                                                                ])
                                                                .draw();
                                                        });
                                                }
                                            },
                                            error: function(xhr, status,
                                                error) {
                                                console.error(error);
                                            }
                                        });
                                    }
                                });
                            } else {
                                hideLoadingOverlay();
                                toastr.error(data.message);
                            }
                        },
                        error: function() {
                            hideLoadingOverlay();
                            toastr.error('Đã xảy ra lỗi khi lấy dữ liệu lịch sử giao dịch.');
                        }
                    });
                }

                $('#search-transaction-history').on('submit', function(e) {
                    e.preventDefault();
                    showLoadingOverlay();
                    var startDate = $('input[name="from_date"]').val();
                    var endDate = $('input[name="to_date"]').val();
                    var limit = $('#limit').val();
                    $('#transactionDataTable').DataTable().clear().draw();
                    currentOffset = 0; // Reset offset when performing a new search
                    fetchTransactionHistory(currentOffset, limit, startDate, endDate);
                });

                $('#nextButton').on('click', function() {
                    showLoadingOverlay();
                    var startDate = $('input[name="from_date"]').val();
                    var endDate = $('input[name="to_date"]').val();
                    var limit = $('#limit').val();
                    var limitInt = parseInt(limit, 10);
                    $('#transactionDataTable').DataTable().clear().draw();
                    currentOffset += limitInt;
                    fetchTransactionHistory(currentOffset, limit, startDate, endDate);
                });

                $('#prevButton').on('click', function() {
                    showLoadingOverlay();
                    var startDate = $('input[name="from_date"]').val();
                    var endDate = $('input[name="to_date"]').val();
                    var limit = $('#limit').val();
                    var limitInt = parseInt(limit, 10);
                    $('#transactionDataTable').DataTable().clear().draw();
                    currentOffset -= limitInt;
                    if (currentOffset < 0) {
                        currentOffset = 0;
                    }
                    fetchTransactionHistory(currentOffset, limit, startDate, endDate);
                });
            });

            function showLoadingOverlay() {
                $("#loadingOverlay").fadeIn();
            }

            function hideLoadingOverlay() {
                $("#loadingOverlay").fadeOut();
            }

            var table = $('#listAccounts').DataTable({
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                info: true,
                ajax: '{{ route('app.supporter.listAccount') }}',
                'pageLength': 100,
                'aLengthMenu': [
                    [100, 200, 500, -1],
                    [100, 200, 500, 'All']
                ],
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        className: 'text-center wide-checkbox',
                        searchable: false
                    },
                    {
                        data: 'id',
                        name: 'id',
                        orderable: true,
                        className: 'hidden',
                        searchable: false
                    },
                    {
                        data: 'icon_displayname',
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: 'account',
                        name: 'acc_no',
                        className: 'text-right'
                    },
                    {
                        data: 'identify',
                        className: 'text-center identify',
                        orderable: false,
                    },
                    {
                        data: 'balance',
                        name: 'balance',
                        render: function(data, type, row) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'remaining_limit_day',
                        name: 'remaining_limit_day',
                        render: function(data, type, row) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'remaining_limit_month',
                        name: 'remaining_limit_month',
                        render: function(data, type, row) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'type',
                        render: (data) => {
                            if (data === 0) {
                                return `<span class="badge bg-info p-3">Nhận tiền</span>`;
                            } else if (data === 1) {
                                return `<span class="badge bg-primary p-3">Chuyển tiền</span>`;
                            } else if (data === 2) {
                                return `<span class="badge bg-info p-3">Nhận và chuyển tiền</span>`;
                            } else if (data === 3) {
                                return `<span class="badge bg-dark p-3">Dồn tiền</span>`;
                            } else if (data === 4) {
                                return `<span class="badge bg-warning p-3">*** Hook ***</span>`;
                            }
                        },
                        orderable: false,
                    },
                    {
                        data: 'status',
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: 'state',
                        render: (data) => {
                            if (data === 0) {
                                return `<span class="badge bg-danger p-2">Không sử dụng</span>`;
                            } else if (data === 1) {
                                return `<span class="badge bg-success p-2">Đang sử dụng</span>`;
                            }
                        },
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        render: function(data, type, row) {
                            return formatTime(data);
                        },
                    }
                ],
                order: [
                    ['1', 'asc'],
                ],
                select: {
                    'style': 'multi'
                },
            }).on('draw', function() {
                $('input[name="bankAccountCheckbox"]').each(function() {
                    this.checked = false;
                });
                $('input[name="main_checkbox"]').prop('checked', false);
                $('button#deleteAllBtn').addClass('d-none');
                $('button#turnOffState').addClass('d-none');
                $('button#turnOnState').addClass('d-none');
            });

            $('#listAccounts').css('width', '100%');

            var dataTable = $('#listAccounts').DataTable();

            // filter type of account
            $('#typeFilterBtn').on('click', function() {
                var filterPopup = $(this).siblings('.filter-popup');
                filterPopup.slideToggle('fast');
            });

            $('#applyFilterBtn').on('click', function() {
                var selectedType = $('#typeFilterSelect').val();

                if (selectedType === "") {
                    dataTable.ajax.url('/get-filtered-data').load();
                } else {
                    dataTable.ajax.url('/get-filtered-data?type=' + selectedType).load();
                }

                $('.filter-popup').slideUp('fast');
            });

            // filter identify
            $('#identifyFilterBtn').on('click', function() {
                var filterPopup = $(this).siblings('.identify-filter-popup');
                filterPopup.slideToggle('fast');
            });

            $('#applyIdentifyFilterBtn').on('click', function() {
                var selectedIdentify = $('#identifyFilterSelect').val();

                $('table tbody tr').each(function() {
                    var identifyValue = $(this).find('.identify').text();
                    if (selectedIdentify === '' || identifyValue === selectedIdentify) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });

                $('.identify-filter-popup').slideUp('fast');
            });

            // filter account type
            $('#accountTypeFilterBtn').on('click', function() {
                var accountTypeFilterPopup = $(this).siblings('.account-type-filter-popup');
                accountTypeFilterPopup.slideToggle('fast');
            });

            $('#applyAccountTypeFilterBtn').on('click', function() {
                var selectedAccountType = $('#accountTypeFilterSelect').val();

                if (selectedAccountType === "") {
                    dataTable.ajax.url('/get-filtered-data').load();
                } else {
                    dataTable.ajax.url('/get-filtered-data?accountType=' + selectedAccountType).load();
                }

                $('.account-type-filter-popup').slideUp('fast');
            });

            // filter status accounts
            $('#statusFilterBtn').on('click', function() {
                var filterPopup = $(this).siblings('.status-filter-popup');
                filterPopup.slideToggle('fast');
            });

            $('#applyStatusFilterBtn').on('click', function() {
                var selectedType = $('#statusFilterSelect').val();

                if (selectedType === "") {
                    dataTable.ajax.url('/get-filtered-data').load();
                } else {
                    dataTable.ajax.url('/get-filtered-data?status=' + selectedType).load();
                }

                $('.status-filter-popup').slideUp('fast');
            });

            function refreshData() {
                $.ajax({
                    url: '{{ route('app.payment.paymentData') }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        $('#listAccounts').DataTable().clear().rows.add(response.data).draw(
                            false);
                    },
                    error: function() {
                        toastr.error('Thất bại', 'Đã xảy ra lỗi khi làm mới dữ liệu.');
                    }
                });
            }

            var autoRefreshInterval;
            $(document).on('click', '#refresh-btn', function() {
                var isAutoRefresh = $(this).data('auto-refresh') || false;

                if (isAutoRefresh) {
                    clearInterval(autoRefreshInterval);
                    $(this).data('auto-refresh', false);
                    $(this).find('#refresh-text').text('Tự động làm mới: Tắt');
                } else {
                    $(this).data('auto-refresh', true);
                    $(this).find('#refresh-text').text('Tự động làm mới: Bật');
                    refreshData();
                    autoRefreshInterval = setInterval(refreshData, 5000);
                }
            });

            $(document).on('click', 'input[name="main_checkbox"]', function() {
                if (this.checked) {
                    $('input[name="bankAccountCheckbox"]').each(function() {
                        this.checked = true;
                    });
                } else {
                    $('input[name="bankAccountCheckbox"]').each(function() {
                        this.checked = false;
                    });
                }
                toggleDeleteAllBtn();
                toggleTurnOffStateBtn();
                toggleTurnOnStateBtn();
            });

            $(document).on('change', 'input[name="bankAccountCheckbox"]', function() {
                if ($('input[name="bankAccountCheckbox"]').length == $(
                        'input[name="bankAccountCheckbox"]:checked').length) {
                    $('input[name="main_checkbox"]').prop('checked', true);
                } else {
                    $('input[name="main_checkbox"]').prop('checked', false);
                }
                toggleDeleteAllBtn();
                toggleTurnOffStateBtn();
                toggleTurnOnStateBtn();
            });

            function toggleDeleteAllBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#deleteAllBtn').text('Xoá (' + $('input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#deleteAllBtn').addClass('d-none');
                }
            }

            $(document).on('click', 'button#deleteAllBtn', function() {
                var checkedBankAccounts = [];
                $('input[name="bankAccountCheckbox"]:checked').each(function() {
                    checkedBankAccounts.push($(this).data('id'));
                });

                if (checkedBankAccounts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: 'Xác nhận xoá tài khoản?',
                        html: 'Bạn có chắc muốn xoá <b>(' + checkedBankAccounts.length +
                            ')</b> tài khoản này không?',
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: 'Đồng ý, xoá',
                        cancelButtonText: 'Huỷ',
                        confirmButtonColor: '#556ee6',
                        cancelButtonColor: '#d33',
                        allowOutsideClick: false,
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: '{{ route('app.payment.deleteSelectedBankAccounts') }}',
                                type: 'DELETE',
                                data: {
                                    ids: checkedBankAccounts,
                                    _token: csrfToken
                                },
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code == 1) {
                                        $('#listAccounts').DataTable().ajax.reload(null,
                                            true);
                                        toastr.success(data.msg);
                                    } else {
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error(xhr.responseText);
                                    toastr.error('Có lỗi xảy ra, vui lòng thử lại');
                                }
                            });
                        }
                    })
                }
            });

            function toggleTurnOffStateBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#turnOffState').text('Tắt (' + $('input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#turnOffState').addClass('d-none');
                }
            }

            $(document).on('click', '.relogin-bank-account', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: 'JSON',
                    success: function(response) {
                        if (response.success) {
                            toastr.success('Đăng nhập tài khoản thành công');
                        } else {
                            if (response.state_auth === 'password') {
                                toastr.error('Vui lòng đăng nhập lại với mật khẩu mới');
                                $('#reloginWithPasswordModal').modal('show');
                                $('#relogin-with-password-form').attr('action', url);
                            } else if (response.state_auth === 'otp') {
                                toastr.error('Vui lòng đăng nhập lại với OTP');
                                $('#reloginWithOTPModal').modal('show');
                                $('#relogin-with-otp-form').attr('action', url);
                            } else if (response.state_auth === 'block') {
                                toastr.error(
                                    'Tài khoản này đang bị khóa vui lòng kiểm tra lại');
                            } else {
                                toastr.error(response.message);
                            }
                        }
                    },
                    error: function(xhr, status, error) {}
                });
            });

            $(document).on('click', '#btn-relogin-sent-otp', function(e) {
                e.preventDefault();
                var url = $('#relogin-with-otp-form').attr('action');
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: 'JSON',
                    data: {
                        action: 'OTP'
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {}
                });
            });

            $(document).on('click', '#btn-submit-relogin-otp', function(e) {
                e.preventDefault();
                var url = $('#relogin-with-otp-form').attr('action');
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: 'JSON',
                    data: {
                        action: 'SUBMIT_OTP',
                        otp: $('#relogin-with-otp-form input[name="otp"]').val()
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            $('#reloginWithOTPModal').modal('hide');
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {}
                });
            });

            $(document).on('click', '#btn-submit-relogin-password', function(e) {
                e.preventDefault();
                var url = $('#relogin-with-password-form').attr('action');
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: 'JSON',
                    data: {
                        action: 'PASSWORD',
                        password: $('#relogin-with-password-form input[name="password"]').val()
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            $('#reloginWithPasswordModal').modal('hide');
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {}
                });
            });

            $(document).on('click', 'button#turnOffState', function() {
                var checkedBankAccounts = [];
                $('input[name="bankAccountCheckbox"]:checked').each(function() {
                    checkedBankAccounts.push($(this).data('id'));
                });

                if (checkedBankAccounts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: 'Xác nhận tắt tài khoản?',
                        html: 'Bạn có chắc muốn tắt <b>(' + checkedBankAccounts.length +
                            ')</b> tài khoản này không?',
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: 'Đồng ý, Tắt',
                        cancelButtonText: 'Huỷ',
                        confirmButtonColor: '#556ee6',
                        cancelButtonColor: '#d33',
                        allowOutsideClick: false,
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: '{{ route('app.payment.turnOffStateAccount') }}',
                                type: 'PUT',
                                data: {
                                    ids: checkedBankAccounts,
                                    _token: csrfToken
                                },
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code == 1) {
                                        $('#listAccounts').DataTable().ajax.reload(null,
                                            true);
                                        toastr.success(data.msg);
                                    } else {
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error(xhr.responseText);
                                    toastr.error('Có lỗi xảy ra, vui lòng thử lại');
                                }
                            });
                        }
                    })
                }
            });

            function toggleTurnOnStateBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#turnOnState').text('Bật (' + $('input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#turnOnState').addClass('d-none');
                }
            }

            $(document).on('click', 'button#turnOnState', function() {
                var checkedBankAccounts = [];
                $('input[name="bankAccountCheckbox"]:checked').each(function() {
                    checkedBankAccounts.push($(this).data('id'));
                });

                if (checkedBankAccounts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: 'Xác nhận bật tài khoản?',
                        html: 'Bạn có chắc muốn bật <b>(' + checkedBankAccounts.length +
                            ')</b> tài khoản này không?',
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: 'Đồng ý, Bật',
                        cancelButtonText: 'Huỷ',
                        confirmButtonColor: '#556ee6',
                        cancelButtonColor: '#d33',
                        allowOutsideClick: false,
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: '{{ route('app.payment.turnOnStateAccount') }}',
                                type: 'PUT',
                                data: {
                                    ids: checkedBankAccounts,
                                    _token: csrfToken
                                },
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code == 1) {
                                        $('#listAccounts').DataTable().ajax.reload(null,
                                            true);
                                        toastr.success(data.msg);
                                    } else {
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error(xhr.responseText);
                                    toastr.error('Có lỗi xảy ra, vui lòng thử lại');
                                }
                            });
                        }
                    })
                }
            });

            $(document).on('click', 'button#deleteBankAccount', function() {
                var accountId = $(this).data('account-id');
                var csrfToken = '{{ csrf_token() }}';

                Swal.fire({
                    title: 'Xác nhận xoá tài khoản?',
                    html: 'Bạn có chắc muốn xoá tài khoản này không?',
                    showCancelButton: true,
                    icon: "question",
                    showCloseButton: true,
                    confirmButtonText: 'Đồng ý, xoá',
                    cancelButtonText: 'Huỷ',
                    confirmButtonColor: '#556ee6',
                    cancelButtonColor: '#d33',
                    allowOutsideClick: false,
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: '{{ route('app.payment.deleteBankAccount') }}',
                            type: 'DELETE',
                            data: {
                                accountId: accountId,
                                _token: csrfToken
                            },
                            dataType: 'json',
                            success: function(data) {
                                if (data.code == 1) {
                                    toastr.success(data.msg);
                                } else {
                                    toastr.error(data.msg);
                                }
                            },
                            error: function(xhr, status, error) {
                                toastr.error(error);
                            }
                        });
                    }
                });
            });

            $(document).on('click', '.showSecurityModalBtn', function() {
                var accountId = $(this).data("account-id");
                $('#securityModal').data("account-id", accountId);
                $('#securityModal').modal('show');
            });

            $('#securityModal').on('toggle.bs.modal', function() {
                $('.showSecurityModalBtn').prop('')
            });

            $(document).on('click', 'button#confirmSecretCode', function() {
                var formData = $("#secret-code-form").serialize();
                var accountId = $('#securityModal').data("account-id");
                $.ajax({
                    url: "{{ route('app.admin.checkSecretCode') }}",
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            $("#securityModal").modal("hide");
                            window.location.href = "/history_withdraw/" + accountId + "/edit";
                        } else {
                            toastr.error('Thất bại',
                                'Mã bảo mật không đúng. Vui lòng thử lại.');
                        }
                    },
                    error: function() {
                        toastr.error('Thất bại',
                            'Có lỗi xảy ra trong quá trình gửi dữ liệu.');
                    }
                });
            });

            function centerModal() {
                var modal = $('.custom-modal');
                var windowHeight = $(window).height();
                var modalHeight = modal.height();

                var topMargin = (windowHeight - modalHeight) / 2;

                modal.css('margin-top', topMargin);
            }

            $(window).on('resize scroll', function() {
                centerModal();
            });

            $('#securityModal').on('shown.bs.modal', function() {
                centerModal();
            });

            $(document).on('click', '#refresh-propose-btn', function() {
                var accountId = $(this).data('account-id');
                $.ajax({
                    url: '/account/' + accountId + '/refresh-propose',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(data) {
                        if (data.code == 1) {
                            $('#listAccounts').DataTable().ajax.reload(null,
                                true);
                            toastr.success(data.msg);
                        } else {
                            toastr.error(data.msg);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error('Đã xảy ra lỗi: ' + error);
                    }
                });

            });
        });

        function formatTime(isoTime) {
            const date = new Date(isoTime);
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear();

            return `${hours}:${minutes}:${seconds} ${day}/${month}/${year}`;
        }

        function formatTimeHistory(timestamp) {
            try {
                const date = new Date(timestamp * 1000);

                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const year = date.getFullYear();

                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;

            } catch (error) {
                return error.toString();
            }
        }

        function numberFormat(number) {
            return new Intl.NumberFormat('en-US').format(number);
        }
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css"
        rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet" href="{{ asset('dist/css/input.css') }}">
    <style>
        .hidden {
            display: none;
        }

        .dataTables_wrapper .table td.text-right {
            text-align: right;
        }

        #transactionHistoryModal .modal-content {
            max-height: 80vh;
            overflow-y: auto;
        }

        #transactionHistoryModal .modal-dialog {
            margin: 0 auto;
            margin-top: 10vh;
            max-width: 90%;
        }

        #securityModal .modal-dialog {
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            margin-top: 10vh;
            max-width: 30%;
        }

        #securityModal .modal-content {
            text-align: center;
            overflow-y: auto;
        }

        #loadingOverlay {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        .loading-spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid #ffffff;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        input[type=checkbox] {
            width: 20px !important;
            height: 20px !important;
        }
    </style>
@endsection