@extends('layouts.app')

@section('title')
    {{ __('account_setting') }}
@endsection

@section('payment')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('account_setting') }}</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">{{ __('account_setting') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            <div id="loading-overlay" class="overlay d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <div class="loading-text">{{ __('Withdrawing money, please wait...') }}</div>
            </div>
            <div id="loading-overlay-add-balance-bank-account" class="overlay d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <div class="loading-text">{{ __('Adding money, please wait...') }}</div>
            </div>
            <div class="card-header">
                <h3 class="card-title">{{ __('List') }}</h3>
                <strong id="balances" style="margin-left: 10px; "></strong>
                <div class="card-tools">
                    @can('payment_banlance_inquiry_delete_turn_off_on')
                        <button class="btn btn-sm btn-secondary d-none" id="deleteAllBtn">
                            {{ __('Delete') }}
                        </button>
                        <button class="btn btn-sm btn-primary d-none" data-bs-toggle="dropdown" aria-expanded="false"
                            id="editAllBtn">
                            {{ __('Edit') }}
                        </button>
                        <div class="dropdown-menu p-4" style="min-width: 300px;">
                            <form id="edit-all-bankaccount">
                                <div class="form-group mb-3">
                                    <label for="type">{{ __('account_type') }}</label>
                                    <select name="type" id="type" class="form-control">
                                        <option value="">--Chọn--</option>
                                        <option value="receive" id="receive_money">Nhận tiền</option>
                                        <option value="transfer" id="transfer_money">Chuyển tiền</option>
                                        <option value="receive_and_transfer" id="receive_and_transfer_money">Nhận và
                                            chuyển tiền
                                        </option>
                                        <option value="deposited_in" id="combine_money">Dồn tiền</option>
                                        <option value="hook" id="hook">Hook</option>
                                        <option value="check_name" id="check_name">Check tên</option>
                                    </select>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-primary" id="submitBtn">Submit</button>
                                </div>
                            </form>
                        </div>
                        <button class="btn btn-sm btn-secondary d-none" id="settingCombineMoney" style="display:none !important">
                            <i class="nav-icon fas fa-cogs"></i>
                            {{ __('combine_money_setting') }}
                        </button>
                        <button class="btn btn-sm btn-danger d-none" id="turnOffAutoWithdraw" style="display:none !important">
                            {{ __('Turn off auto withdrawal') }}
                        </button>
                        <button class="btn btn-sm btn-success d-none" id="turnOnAutoWithdraw" style="display:none !important">
                            {{ __('Turn on auto withdrawal') }}
                        </button>
                        <button class="btn btn-sm btn-warning d-none" id="balanceInquiryBtn">
                            {{ __('Balance inquiry') }}
                        </button>
                        <button class="btn btn-sm btn-secondary d-none" id="checkBackAccountReceive" style="display:none !important">
                            {{ __('Kiểm tra nhận') }}
                        </button>
                        <button class="btn btn-sm btn-primary d-none" id="checkBackAccountTransfer" style="display:none !important">
                            {{ __('Kiểm tra chuyền') }}
                        </button>

                        <button class="btn btn-sm btn-danger d-none" id="turnOffState">
                            {{ __('Turn off') }}
                        </button>
                        <button class="btn btn-sm btn-success d-none" id="turnOnState">
                            {{ __('Turn on') }}
                        </button>
                    @endcan
                    {{-- "Báo cáo" đã chuyển xuống filter bar bên dưới --}}
                    @can('payment_create')
                        <a class="btn btn-sm btn-success" href="{{ route('app.payment.create') }}"><i class="fas fa-add"></i>
                            {{ __('Add account') }}</a>
                    @endcan
                    @can('history_withdraw')
                        <a class="btn btn-sm btn-secondary" href="{{ route('app.history_withdraw.index') }}"><i
                                class="nav-icon fas fa-history"></i>
                            {{ __('Withdrawal history') }}</a>
                    @endcan
                    @can('payment_export')
                        <a class="btn btn-sm btn-primary" id="export-account" href="javascript:void(0)"><i
                                class="fas fa-file-excel"></i> {{ __('Export files') }}</a>
                    @endcan
                    @can('payment_setting_account_priority')
                        <div class="dropdown btn btn-sm">
                            <a class="btn btn-sm btn-info dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false"><i
                                    class="fa-solid fa-plus"></i>{{ __('Add') }}</a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                                {{-- <a class="dropdown-item" href="{{ route('app.payment.editPriorityAccount') }}">
                                    <i class="fa-solid fa-arrow-up-1-9"></i>
                                    <span class="btn btn-sm btn-secondary">{{ __('Order of priority') }}</span>
                                </a> --}}
                                <a class="dropdown-item" href="{{ route('app.payment.create.manual') }}">
                                    <i class="fas fa-add"></i>
                                    <span
                                        class="btn btn-sm btn-secondary">{{ __('Add an account that doesnot use the API') }}</span>
                                </a>
                                <a class="dropdown-item" href="{{ route('app.payment.account_deleted') }}">
                                    <i class="fas fa-trash"></i>
                                    <span class="btn btn-sm btn-secondary">{{ __('Các tài khoản đã xoá') }}</span>
                                </a>
                                {{-- <a href="{{ route('app.account.index') }}" class="dropdown-item">
                                <i class="fas fa-add"></i>
                                <span class="btn btn-sm btn-primary">{{ __('Thêm tài khoản duyệt tay') }}</span>
                            </a> --}}
                            </div>
                        </div>
                    @endcan
                </div>
            </div>
            <div id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
            </div>

            {{-- ===== Bộ lọc tìm kiếm ===== --}}
            <div class="card-body py-3 border-bottom filter-bar">
                <div class="row g-2 align-items-center">
                    <div class="col-xl col-md-4 col-sm-6 mb-2">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light">Loại</span>
                            <select id="filter-bar-type" class="form-control form-control-sm">
                                <option value="">-- Chọn --</option>
                                <option value="bank">Bank</option>
                                @foreach (\App\Models\Bank\Bank::query()->select(['name', 'display_name'])->get() as $value)
                                    <option value="{{ $value->name }}">{{ $value->display_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-xl col-md-4 col-sm-6 mb-2">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light">Loại tài khoản</span>
                            <select id="filter-bar-account-type" class="form-control form-control-sm">
                                <option value="">-- Chọn --</option>
                                @foreach (BANK_ACCOUNT_TYPE as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                                @if (config('app.name') == 'SwiftPay')
                                    <option value="chatmomo">{{ __('ChatMomo') }}</option>
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-xl col-md-4 col-sm-6 mb-2">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light">Trạng thái</span>
                            <select id="filter-bar-status" class="form-control form-control-sm">
                                <option value="">-- Chọn --</option>
                                @foreach (ACCOUNT_STATUS as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-xl col-md-4 col-sm-6 mb-2">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light">Tình trạng</span>
                            <select id="filter-bar-state" class="form-control form-control-sm">
                                <option value="">-- Chọn --</option>
                                @foreach (ACCOUNT_STATE as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-xl-auto col-md-12 col-sm-12 mb-2 text-md-end">
                        <button class="btn btn-primary btn-sm" id="btn-apply-filters">
                            <i class="fa fa-search"></i> Tìm kiếm
                        </button>
                        @can('payment_accounts_statistics')
                            <a class="btn btn-info btn-sm" id="btn-statistics-filter-bar">Báo cáo</a>
                        @endcan
                    </div>
                </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

            @php
                $tableBodyStyle = $isDemoAccount ? 'display: none;' : '';
            @endphp
            <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>{{ __('type') }}</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>{{ __('Deposited') }}</th>
                                <th>{{ __('balance') }}</th>
                                {{-- <th>{{ __('Automatic withdrawal') }}</th> --}}
                                <th>{{ __('Withdrawal') }}</th>
                                <th>{{ __('remaining_limit_day') }}</th>
                                <th>{{ __('remaining_limit_month') }}</th>
                                <th>{{ __('Ghi chú') }}</th>
                                {{-- <th>{{ __('Người tạo') }}</th>
                                <th>{{ __('Package') }}</th>
                                <th>{{ __('Số tin đã gửi trong ngày') }}</th> --}}
                                {{-- <th>{{ __('level_limit') }}<i class="fa fa-info-circle"
                                        title="Level = 1, hạn mức tài khoản là 100m. Level = 2, hạn mức tài khoản là 50m. Level = 3, hạn mức tài khoản là 33m. Các tài khoản level 2, 3 tổng hạn mức của các tài khoản là 100m, sử dụng theo dạng bù trừ lẫn nhau."></i>
                                </th> --}}
                                {{-- <th>{{ __('Out Transaction Number') }}</th> --}}
                                <th>{{ __('account_type') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('State') }}</th>
                                {{-- <th>{{ __('Thời gian check') }}</th> --}}
                                <th>{{ __('created_date') }}</th>
                                <th>{{ __('operation') }}</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>

        <div class="modal fade" id="accountsStatisticsModal" tabindex="-1"
            aria-labelledby="accountsStatisticsModalModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-center" id="accountsStatisticsModalLabel">
                            {{ __('report') }}</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-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <tbody>
                                        <tr>
                                            <td>{{ __('Số tài khoản') }}</td>
                                            <td><span id="countAccounts"></span></td>
                                        </tr>
                                        <tr>
                                            <td>{{ __('Tổng số dư hiện tại') }}</td>
                                            <td><span id="totalBalance"></span></td>
                                        </tr>
                                        <tr>
                                            <td>{{ __('Tổng hạn mức tháng của Momo') }}</td>
                                            <td><span id="totalRemainingLimitMonth"></span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('close') }}</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="text" 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>

        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasRightLabel">Chỉnh sửa tài khoản</h5>
                <div class="card-header">
                    <div class="card-tools">
                        <a class="btn btn-sm btn-primary" id="add-device"><i class="fas fa-add"></i>
                            {{ __('Quản lý thiết bị') }}</a>
                        <a class="btn btn-sm btn-success ms-4" id="manage-account-video"><i class="fas fa-add"></i>
                            {{ __('Quản lý video tài khoản') }}</a>
                    </div>
                </div>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <hr>
            <div class="offcanvas-body">
                <form class="row" method="POST" id="updateForm">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="account_id" id="account_id">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="bank">{{ __('Ngân hàng/Ví') }}</label>
                            <input type="text" class="form-control" id="bank_name" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="acc_name">{{ __('Tên tài khoản') }}</label>
                            <input type="text" class="form-control" name="acc_name" id="acc_name" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="acc-no">{{ __('Số tài khoản') }}</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="acc_no" disabled>
                                <input type="text" class="form-control" id="register_smart_otp" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="amount-limit">{{ __('Hạn mức tối đa/giao dịch') }}</label>
                            <input type="text" class="form-control" id="amount_limit" name="amount_limit"
                                pattern="[0-9,.]+">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="min-cashout">{{ __('Min Cashout') }}</label>
                            <input type="text" class="form-control" id="min_cashout" name="min_cashout">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="max-cashout">{{ __('Max Cashout') }}</label>
                            <input type="text" class="form-control" id="max_cashout" name="max_cashout">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="auto-withdraw">{{ __('Tự động rút') }}</label>
                            <input type="text" class="form-control" name="auto_withdraw" id="auto_withdraw" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="withdraw">{{ __('Đã rút') }}</label>
                            <input type="text" class="form-control" name="withdraw" id="withdraw" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="state">{{ __('Tình trạng') }}</label>
                                    <select name="state" id="state" class="form-control">
                                        <option value="0" id="not_use">Không sử dụng</option>
                                        <option value="1" id="using">Đang sử dụng</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="is_block">{{ __('Tình trạng khoá') }}</label>
                                    <select name="is_block" id="is_block" class="form-control">
                                        <option value="1" id="blocked">Đã khoá</option>
                                        <option value="2" id="need-otp">OTP</option>
                                        <option value="0" id="normal">Bình thường</option>
                                        <option value="" id="no_update">Chưa cập nhật</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="type">{{ __('account_type') }}</label>
                                    <select name="type" id="typeAccount" class="form-control">
                                        <option value="receive" id="receive_money">Nhận tiền</option>
                                        <option value="transfer" id="transfer_money">Chuyển tiền</option>
                                        <option value="receive_and_transfer" id="receive_and_transfer_money">Nhận và
                                            chuyển tiền
                                        </option>
                                        <option value="deposited_in" id="combine_money">Dồn tiền</option>
                                        <option value="hook" id="hook">Hook</option>
                                        <option value="check_name" id="check_name">Check tên</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6" id="partner-section" style="display: none;">
                                <div class="form-group">
                                    <label for="partner">{{ __('Dành riêng cho đối tác') }}</label>
                                    <select name="partner" class="form-control" id="partner_name">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::isForUser() as $partner)
                                            <option value="{{ $partner->id }}" class="partner-option">
                                                {{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label for="remaining-limit-month">{{ __('Hạn mức còn lại/Tháng') }}</label>
                            <input type="text" class="form-control" name="remaining_limit_month"
                                id="remaining_limit_month">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="proxy">{{ __('Proxy') }}</label>
                            <textarea type="text" class="form-control" name="proxy" id="proxy" placeholder="{{ __('Thêm proxy') }}"></textarea>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="note">{{ __('note') }}</label>
                            <textarea type="text" class="form-control" name="note" id="note"
                                placeholder="{{ __('Nhập ghi chú') }}"></textarea>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="text-center">
                            <button type="submit" id="saveButton" class="btn btn-success"><i class="fas fa-save"></i>
                                {{ __('Lưu') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="modal fade" id="qr-code-modal" tabindex="-1" aria-labelledby="qr-code-label" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="qr-code-label">
                            Mã QR Code Tài khoản
                        </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">
                                    <div class="col-lg-12 text-center">
                                        <img src="" id="qr-code-image" alt="IMAGE QRCODE">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="internalWithdrawModal" tabindex="-1"
            aria-labelledby="internalWithdrawModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="internalWithdrawModalLabel">
                            <i class="fas fa-money-bill-wave"></i> Chuyển tiền
                        </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 id="internal-withdraw-source"
                            class="alert alert-secondary py-2 mb-3 small"></div>
                        <form id="internal-withdraw-form" onsubmit="return false;">
                            <input type="hidden" id="internal-withdraw-account-id">

                            <div class="form-group mb-3">
                                <label class="font-weight-bold mb-2 d-block">Hình thức nhận tiền</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="internal-withdraw-mode"
                                        id="iw-mode-quick" value="quick" checked>
                                    <label class="form-check-label" for="iw-mode-quick">Chọn bank out hệ thống</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="internal-withdraw-mode"
                                        id="iw-mode-manual" value="manual">
                                    <label class="form-check-label" for="iw-mode-manual">Nhập STK thủ công</label>
                                </div>
                            </div>

                            <div id="iw-quick-block" class="row">
                                <div class="form-group col-md-7 mb-3">
                                    <label for="internal-withdraw-bank-out">Bank Out nhận tiền</label>
                                    <select class="form-control" id="internal-withdraw-bank-out">
                                        <option value="">-- Chọn tài khoản nhận --</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-5 mb-3 iw-amount-wrapper">
                                    <label for="internal-withdraw-amount-quick">Số tiền (VNĐ)</label>
                                    <input type="text" class="form-control internal-withdraw-amount"
                                        id="internal-withdraw-amount-quick"
                                        placeholder="Tối thiểu 10,000" autocomplete="off">
                                    <small class="text-muted">Tối thiểu 10,000 VNĐ.</small>
                                </div>
                            </div>

                            <div id="iw-manual-block" class="row" style="display:none;">
                                <div class="form-group col-md-6 mb-3">
                                    <label for="internal-withdraw-dest-bank">Ngân hàng nhận</label>
                                    <select class="form-control" id="internal-withdraw-dest-bank">
                                        <option value="">-- Chọn ngân hàng --</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <label for="internal-withdraw-dest-accno">Số tài khoản nhận</label>
                                    <input type="text" class="form-control" id="internal-withdraw-dest-accno"
                                        placeholder="Nhập số tài khoản" autocomplete="off">
                                </div>
                                <div class="form-group col-md-7 mb-3">
                                    <label for="internal-withdraw-dest-accname">
                                        Tên chủ TK <span class="text-muted small">(tùy chọn, ghi log)</span>
                                    </label>
                                    <input type="text" class="form-control" id="internal-withdraw-dest-accname"
                                        placeholder="Nguyễn Văn A" autocomplete="off">
                                </div>
                                <div class="form-group col-md-5 mb-3 iw-amount-wrapper">
                                    <label for="internal-withdraw-amount-manual">Số tiền (VNĐ)</label>
                                    <input type="text" class="form-control internal-withdraw-amount"
                                        id="internal-withdraw-amount-manual"
                                        placeholder="Tối thiểu 10,000" autocomplete="off">
                                    <small class="text-muted">Tối thiểu 10,000 VNĐ.</small>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Hủy</button>
                        <button type="button" class="btn btn-primary" id="internal-withdraw-submit-btn">
                            <i class="fas fa-paper-plane"></i> Xác nhận chuyển tiền
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="loginWebModal" tabindex="-1" aria-labelledby="loginWebModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="loginWebModalLabel">
                            <i class="fas fa-globe"></i> {{ __('Login Web ACB') }}
                        </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">
                        {{-- Khu vực hiển thị tiến trình (info/success/danger) --}}
                        <div id="login-web-status" class="mb-3"></div>

                        {{-- Thông tin tài khoản --}}
                        <div class="mb-3">
                            <small class="text-muted">{{ __('Tài khoản') }}:
                                <strong id="login-web-username-display"></strong>
                            </small>
                        </div>

                        <form id="login-web-form" onsubmit="return false;">
                            <input type="hidden" id="login-web-account-id">
                            <div class="form-group">
                                <label for="login-web-otp">{{ __('Mã OTP từ app ACB') }}</label>
                                <input type="text" class="form-control" id="login-web-otp"
                                    placeholder="{{ __('VD: 180630') }}" autocomplete="off" maxlength="10">
                                <small class="form-text text-muted">
                                    {{ __('OTP có hiệu lực ~120 giây. Nếu hết hạn, bấm "Gửi lại OTP".') }}
                                </small>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">
                            {{ __('Đóng') }}
                        </button>
                        <button type="button" class="btn btn-outline-warning" id="btn-login-web-resend">
                            <i class="fas fa-redo"></i> {{ __('Gửi lại OTP') }}
                        </button>
                        <button type="button" class="btn btn-outline-success" id="btn-login-web-submit">
                            <i class="fas fa-check"></i> {{ __('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 type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var amountInputs = document.querySelectorAll('.amount-withdraw');

            amountInputs.forEach(function(input) {
                input.addEventListener('input', function() {
                    var value = this.value.replace(/[^\d]/g, '');

                    var formattedValue = value.split('').reverse().join('').replace(/(\d{3})/g,
                        '$1,').split('').reverse().join('');

                    if (formattedValue[0] === ',') {
                        formattedValue = formattedValue.substr(1);
                    }

                    this.value = formattedValue;
                });
            });
        });
    </script>
    <script>
        $('#export-account').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "{{ route('app.exportPayment') }}",
                dataType: 'JSON',
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(function() {
                            window.open('/file-managers', '_blank');
                        }, 3000);
                    }
                },
                error: function(error) {
                    toastr.error(error);
                },
            });
        });
    </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>';
                                                            var trans_time_format =
                                                                formatTimeHistory(
                                                                    item
                                                                    .trans_time
                                                                );
                                                            transactionDataTable
                                                                .row
                                                                .add([
                                                                    item
                                                                    .transaction_id,
                                                                    item
                                                                    .amount,
                                                                    ioText,
                                                                    item
                                                                    .fee,
                                                                    item
                                                                    .content,
                                                                    trans_time_format,
                                                                    statusText
                                                                ])
                                                                .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 userRole = "{{ checkRoleUser() }}";
            var table = $('#listAccounts').DataTable({
                'pagingType': 'input',
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                info: true,
                ajax: {
                    url: "{{ route('app.payment.paymentData') }}",
                    error: function(xhr, status, error) {
                        if (status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                'pageLength': 100,
                'aLengthMenu': [
                    [20, 50, 100, 200, 500, -1],
                    [20, 50, 100, 200, 500, 'All']
                ],
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        className: 'text-center wide-checkbox',
                        searchable: false,
                        defaultContent: ''
                    },
                    {
                        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: 'deposited',
                        // name: 'deposited',
                        // render: function(data, type, row) {
                        //     return numberFormat(data);
                        // }
                    },
                    {
                        data: 'balance',
                        name: 'balance',
                        className: 'balance',
                        render: function(data, type, row) {
                            var configMaxBalance = "{{ config('config_app.max_balance') }}";
                            if (data > configMaxBalance) {
                                return `<span style="color: red;">${numberFormat(data)}</span>`;
                            }
                            return numberFormat(data);
                        }
                    },
                    // {
                    //     data: 'auto_withdraw',
                    //     className: 'text-right',
                    // },
                    {
                        data: 'withdraw',
                        name: 'withdraw',
                        render: function(data, type, row) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'remaining_limit_day',
                    },
                    {
                        data: 'remaining_limit_month',
                    },
                    {
                        data: 'note',
                    },
                    // {
                    //     data: 'user_id',
                    //     visible: "{{ config('app.name') == 'SwiftPay' ? true : false }}"
                    // },
                    // {
                    //     data: 'package_name',
                    //     visible: "{{ config('app.name') == 'SwiftPay' ? true : false }}"
                    // },
                    // {
                    //     data: 'max_number_send',
                    //     visible: "{{ config('app.name') == 'SwiftPay' ? true : false }}"
                    // },
                    // {
                    //     data: 'level',
                    // },
                    // {
                    //     data: 'transaction_limit',
                    // },
                    {
                        data: 'type',
                        render: (data) => {
                            if (data === 'receive') {
                                return `<span class="badge bg-secondary p-3">{{ __('Receive money') }}</span>`;
                            } else if (data === 'transfer') {
                                return `<span class="badge bg-primary p-3">{{ __('Transfer money') }}</span>`;
                            } else if (data === 'receive_and_transfer') {
                                return `<span class="badge bg-secondary p-3">{{ __('Receive and transfer money') }}</span>`;
                            } else if (data === 'deposited_in') {
                                return `<span class="badge bg-dark p-3">{{ __('Gather money') }}</span>`;
                            } else if (data === 'hook') {
                                return `<span class="badge bg-warning p-3">Hook</span>`;
                            } else if (data === 'chatmomo') {
                                return `<span class="badge bg-warning p-3">Chatmomo</span>`;
                            } else if (data === 'check_name') {
                                return `<span class="badge bg-info p-3">Check tên</span>`;
                            }
                        },
                        orderable: true,
                    },
                    {
                        data: 'status',
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: 'state',
                        render: (data) => {
                            if (data === false) {
                                return `<span class="badge bg-danger p-2">{{ __('Do not use') }}</span>`;
                            } else if (data === true) {
                                return `<span class="badge bg-success p-2">{{ __('In use') }}</span>`;
                            }
                        },
                        className: 'text-center',
                        orderable: false
                    },
                    // {
                    //     data: 'checked_at',
                    //     render: function(data, type, row) {
                    //         if (data) {
                    //             return formatTime(data);
                    //         }
                    //         return '';
                    //     },
                    // },
                    {
                        data: 'created_at',
                        render: function(data, type, row) {
                            return formatTime(data);
                        },
                    },
                    {
                        data: null,
                        name: 'action',
                        orderable: false,
                        className: 'text-center',
                        render: function(data, type, row) {
                            return data.action;
                        },
                        searchable: false,
                        visible: userRole
                    }
                ],
                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#editAllBtn').addClass('d-none');
                $('button#balanceInquiryBtn').addClass('d-none');
                $('button#turnOffState').addClass('d-none');
                $('button#turnOnState').addClass('d-none');
                $('button#turnOffAutoWithdraw').addClass('d-none');
                $('button#checkBackAccountReceive').addClass('d-none');
                $('button#checkBackAccountTransfer').addClass('d-none');
                $('button#turnOnAutoWithdraw').addClass('d-none');
                $('button#settingCombineMoney').addClass('d-none');
            });

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

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

            // ===== Filter bar: gom 5 filter ở 1 chỗ, bấm Tìm kiếm reload ajax =====
            $('#btn-apply-filters').on('click', function() {
                var params = [];
                var t = $('#filter-bar-type').val();
                var at = $('#filter-bar-account-type').val();
                var st = $('#filter-bar-status').val();
                var sta = $('#filter-bar-state').val();
                if (t) params.push('type=' + encodeURIComponent(t));
                if (at) params.push('accountType=' + encodeURIComponent(at));
                if (st) params.push('status=' + encodeURIComponent(st));
                if (sta) params.push('state=' + encodeURIComponent(sta));
                var url = '/get-filtered-data' + (params.length ? '?' + params.join('&') : '');
                dataTable.ajax.url(url).load(function(json) {
                    var balancesDiv = document.getElementById('balances');
                    if (json && json.data && json.data.length > 0) {
                        balancesDiv.innerHTML = 'Tổng số dư là : ' + numberFormat(json.totalBalance);
                    } else {
                        balancesDiv.innerHTML = '';
                    }
                });
            });

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

            $('#applyFilterBtn').on('click', function() {
                var selectedStatus = $('#statusFilterSelect').val();
                var selectedType = $('#typeFilterSelect').val();
                var selectedAccountType = $('#accountTypeFilterSelect').val();
                var selectedState = $('#stateFilterSelect').val();
                var url = '/get-filtered-data?';
                var params = [];
                if (selectedStatus) {
                    params.push('status=' + selectedStatus);
                }
                if (selectedType) {
                    params.push('type=' + selectedType);
                }
                if (selectedAccountType) {
                    params.push('accountType=' + selectedAccountType);
                }
                if (selectedState) {
                    params.push('state=' + selectedState);
                }
                url += params.join('&');
                dataTable.ajax.url(url).load(function(json) {
                    var datas = json.data;
                    var balances = 0;
                    var balancesDiv = document.getElementById("balances");
                    if (datas.length > 0) {
                        balancesDiv.innerHTML = "Tổng số dư là : " + numberFormat(json
                            .totalBalance);
                    } else {
                        balancesDiv.innerHTML = "";
                    }
                });
                $('.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();

                var balances = 0;
                var isDisplay = 0;
                $('table tbody tr').each(function() {
                    var identifyValue = $(this).find('.identify').text();
                    if (selectedIdentify === '' || identifyValue === selectedIdentify) {
                        isDisplay = 1;
                        var balanceText = $(this).find('.balance').text();
                        var balance = parseFloat(balanceText.replace(/,/g, ''));

                        if (!isNaN(balance)) {
                            balances += balance;
                        }
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                var balancesDiv = document.getElementById("balances");
                if (isDisplay == 1) {
                    balancesDiv.innerHTML = "Tổng số dư là : " + numberFormat(balances);
                } else {
                    balancesDiv.innerHTML = "";

                }

                $('.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 selectedStatus = $('#statusFilterSelect').val();
                var selectedType = $('#typeFilterSelect').val();
                var selectedAccountType = $('#accountTypeFilterSelect').val();
                var selectedState = $('#stateFilterSelect').val();
                var url = '/get-filtered-data?';
                var params = [];
                if (selectedStatus) {
                    params.push('status=' + selectedStatus);
                }
                if (selectedType) {
                    params.push('type=' + selectedType);
                }
                if (selectedAccountType) {
                    params.push('accountType=' + selectedAccountType);
                }
                if (selectedState) {
                    params.push('state=' + selectedState);
                }
                url += params.join('&');
                dataTable.ajax.url(url).load(function(json) {
                    var datas = json.data;
                    var balances = 0;
                    var balancesDiv = document.getElementById("balances");
                    if (datas.length > 0) {
                        balancesDiv.innerHTML = "Tổng số dư là : " + numberFormat(json
                            .totalBalance);
                    } else {
                        balancesDiv.innerHTML = "";
                    }
                });
                $('.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 selectedStatus = $('#statusFilterSelect').val();
                var selectedType = $('#typeFilterSelect').val();
                var selectedAccountType = $('#accountTypeFilterSelect').val();
                var selectedState = $('#stateFilterSelect').val();
                var url = '/get-filtered-data?';
                var params = [];
                if (selectedStatus) {
                    params.push('status=' + selectedStatus);
                }
                if (selectedType) {
                    params.push('type=' + selectedType);
                }
                if (selectedAccountType) {
                    params.push('accountType=' + selectedAccountType);
                }
                if (selectedState) {
                    params.push('state=' + selectedState);
                }
                url += params.join('&');
                dataTable.ajax.url(url).load(function(json) {
                    var datas = json.data;
                    var balances = 0;
                    var balancesDiv = document.getElementById("balances");
                    if (datas.length > 0) {
                        balancesDiv.innerHTML = "Tổng số dư là : " + numberFormat(json
                            .totalBalance);
                    } else {
                        balancesDiv.innerHTML = "";
                    }
                });
                $('.status-filter-popup').slideUp('fast');
            });

            // filter state accounts
            $('#stateFilterBtn').on('click', function() {
                var filterPopup = $(this).siblings('.state-filter-popup');
                filterPopup.slideToggle('fast');
            });
            $('#applyStateFilterBtn').on('click', function() {
                var selectedStatus = $('#statusFilterSelect').val();
                var selectedType = $('#typeFilterSelect').val();
                var selectedAccountType = $('#accountTypeFilterSelect').val();
                var selectedState = $('#stateFilterSelect').val();
                var url = '/get-filtered-data?';
                var params = [];
                if (selectedStatus) {
                    params.push('status=' + selectedStatus);
                }
                if (selectedType) {
                    params.push('type=' + selectedType);
                }
                if (selectedAccountType) {
                    params.push('accountType=' + selectedAccountType);
                }
                if (selectedState) {
                    params.push('state=' + selectedState);
                }
                url += params.join('&');
                dataTable.ajax.url(url).load(function(json) {
                    var datas = json.data;
                    var balances = 0;
                    var balancesDiv = document.getElementById("balances");
                    if (datas.length > 0) {
                        balancesDiv.innerHTML = "Tổng số dư là : " + numberFormat(json
                            .totalBalance);
                    } else {
                        balancesDiv.innerHTML = "";
                    }
                });
                $('.state-filter-popup').slideUp('fast');
            });

            $(document).on('click', '#btn-statistics, #btn-statistics-filter-bar', function(e) {
                $.ajax({
                    url: "{{ route('app.payment.statistics') }}",
                    type: 'GET',
                    success: function(response) {
                        $('#countAccounts').text(response
                            .countAccounts);
                        $('#totalBalance').text(response
                            .totalBalance);
                        $('#totalRemainingLimitMonth').text(response.totalRemainingLimitMonth);
                        $('#accountsStatisticsModal').modal('show');
                    },
                    error: function() {
                        toastr.error('Đã xảy ra lỗi khi thống kê dữ liệu.');
                    }
                });
            });

            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();
                toggleBalanceInquiryBtn();
                toggleTurnOffStateBtn();
                toggleTurnOnStateBtn();
                toggleTurnOffAutoWithdrawBtn();
                toggleCheckBackAccountReceiveBtn();
                toggleCheckBackAccountTransferBtn();
                toggleTurnOnAutoWithdrawBtn();
                toggleCombineMoneyBtn();
                toggleEditAllBtn();
            });

            $(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();
                toggleBalanceInquiryBtn();
                toggleTurnOffStateBtn();
                toggleTurnOnStateBtn();
                toggleTurnOffAutoWithdrawBtn();
                toggleCheckBackAccountTransferBtn();
                toggleCheckBackAccountReceiveBtn();
                toggleTurnOnAutoWithdrawBtn();
                toggleCombineMoneyBtn();
                toggleEditAllBtn();
            });

            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');
                }
            }

            function toggleEditAllBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#editAllBtn').text('Chỉnh sửa (' + $('input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#editAllBtn').addClass('d-none');
                }
            }

            $('button#submitBtn').on('click', function(e) {
                e.preventDefault();

                var checkedBankAccounts = [];
                $('input[name="bankAccountCheckbox"]:checked').each(function() {
                    checkedBankAccounts.push($(this).data('id'));
                });
                var csrfToken = '{{ csrf_token() }}';
                $.ajax({
                    url: "{{ route('app.payment.editSelectedBankAccounts') }}",
                    type: 'POST',
                    data: {
                        ids: checkedBankAccounts,
                        formData: $('#type').val(),
                        _token: csrfToken
                    },
                    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#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');
                                }
                            });
                        }
                    })
                }
            });

            $(document).on('click', 'button#checkBackAccountReceive', function() {
                var checkedBankAccounts = [];
                $('input[name="bankAccountCheckbox"]:checked').each(function() {
                    checkedBankAccounts.push($(this).data('id'));
                });
                if (checkedBankAccounts.length > 30) {
                    toastr.error('Chỉ được kiểm tra dưới 30 tài khoản 1 lúc!');
                } else if (checkedBankAccounts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: 'Xác nhận kiểm tra nhận?',
                        html: 'Bạn có chắc muốn kiểm tra nhận <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.checkBackAccountReceive') }}",
                                type: 'POST',
                                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#checkBackAccountTransfer', function() {
                var checkedBankAccounts = [];
                $('input[name="bankAccountCheckbox"]:checked').each(function() {
                    checkedBankAccounts.push($(this).data('id'));
                });
                if (checkedBankAccounts.length > 30) {
                    toastr.error('Chỉ được kiểm tra dưới 30 tài khoản 1 lúc!');
                } else if (checkedBankAccounts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: 'Xác nhận kiểm tra chuyển?',
                        html: 'Bạn có chắc muốn kiểm tra chuyển <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.checkBackAccountTransfer') }}",
                                type: 'POST',
                                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 toggleBalanceInquiryBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#balanceInquiryBtn').text('Truy vấn số dư (' + $(
                            'input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#balanceInquiryBtn').addClass('d-none');
                }
            }

            $(document).on('click', 'button#balanceInquiryBtn', 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 truy vấn số dư tài khoản?',
                        html: 'Bạn có chắc muốn truy vấn số dư <b>(' + checkedBankAccounts
                            .length +
                            ')</b> tài khoản này không?',
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: 'Đồng ý, truy vấn',
                        cancelButtonText: 'Huỷ',
                        confirmButtonColor: '#556ee6',
                        cancelButtonColor: '#d33',
                        allowOutsideClick: false,
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: "{{ route('app.payment.balanceInquirySelectedBankAccounts') }}",
                                type: 'POST',
                                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');
                }
            }

            function toggleTurnOffAutoWithdrawBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#turnOffAutoWithdraw').text('Tắt tự động rút (' + $(
                            'input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#turnOffAutoWithdraw').addClass('d-none');
                }
            }

            function toggleCheckBackAccountReceiveBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#checkBackAccountReceive').text('Kiểm tra nhận (' + $(
                            'input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#checkBackAccountReceive').addClass('d-none');
                }
            }

            function toggleCheckBackAccountTransferBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#checkBackAccountTransfer').text('Kiểm tra chuyển (' + $(
                            'input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#checkBackAccountTransfer').addClass('d-none');
                }
            }

            function toggleTurnOnAutoWithdrawBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#turnOnAutoWithdraw').text('Bật tự động rút (' + $(
                            'input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#turnOnAutoWithdraw').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);
                            }
                        });
                    }
                });
            });

            function toggleCombineMoneyBtn() {
                if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                    $('button#settingCombineMoney').text('Cài đặt dồn tiền (' + $(
                            'input[name="bankAccountCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#settingCombineMoney').addClass('d-none');
                }
            }

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

                window.location.href = '/settings?selectedAccounts=' + selectedAccounts.join(',');
            });

            $(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.');
                    }
                });
            });

            $(document).on('click', 'button#turnOffAutoWithdraw', 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 rút tự động tài khoản?',
                        html: 'Bạn có chắc muốn tắt rút tự động <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.turnOffAutoWithdrawAccount') }}",
                                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#turnOnAutoWithdraw', 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ự động rút tài khoản?',
                        html: 'Bạn có chắc muốn bật tự động rú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.turnOnAutoWithdrawAccount') }}",
                                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 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);
                    }
                });

            });

            $(document).on('click', '.reconnect-device-btn', function() {
                var $btn = $(this);
                if ($btn.data('loading')) return;
                var accountId = $btn.data('account-id');
                var deviceId = $btn.data('device-id');
                if (!confirm('Kết nối lại thiết bị out cho device_id: ' + deviceId + ' ?')) return;
                $btn.data('loading', true).prop('disabled', true);
                $.ajax({
                    url: '/account/' + accountId + '/reconnect-device',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(data) {
                        if (data.code == 1) {
                            toastr.success(data.msg || 'Kết nối thành công');
                        } else {
                            toastr.error(data.msg || 'Kết nối thất bại');
                        }
                    },
                    error: function(xhr) {
                        var msg = (xhr.responseJSON && xhr.responseJSON.msg) || xhr.statusText || 'Đã xảy ra lỗi';
                        toastr.error('Đã xảy ra lỗi: ' + msg);
                    },
                    complete: function() {
                        $btn.data('loading', false).prop('disabled', false);
                    }
                });
            });

            $(document).on('click', '.internal-withdraw-btn', function() {
                var accountId = $(this).data('account-id');
                // Destroy select2 cũ TRƯỚC khi .html() để không phá vỡ DOM mirror của select2
                if ($('#internal-withdraw-bank-out').hasClass('select2-hidden-accessible')) {
                    $('#internal-withdraw-bank-out').select2('destroy');
                }
                if ($('#internal-withdraw-dest-bank').hasClass('select2-hidden-accessible')) {
                    $('#internal-withdraw-dest-bank').select2('destroy');
                }
                $('#internal-withdraw-account-id').val(accountId);
                $('#internal-withdraw-amount-quick, #internal-withdraw-amount-manual').val('');
                $('#internal-withdraw-dest-accno').val('');
                $('#internal-withdraw-dest-accname').val('');
                $('#iw-mode-quick').prop('checked', true).trigger('change');
                $('#internal-withdraw-bank-out').html('<option value="">-- Đang tải danh sách bank out... --</option>').prop('disabled', true);
                $('#internal-withdraw-dest-bank').html('<option value="">-- Đang tải danh sách ngân hàng... --</option>').prop('disabled', true);
                $('#internal-withdraw-source').html('Đang tải thông tin tài khoản nguồn...');
                $('#internal-withdraw-submit-btn').prop('disabled', true);
                $('#internalWithdrawModal').modal('show');

                $.ajax({
                    url: '/account/' + accountId + '/internal-withdraw-options',
                    type: 'GET',
                    dataType: 'JSON',
                    success: function(res) {
                        if (!res.success) {
                            toastr.error(res.msg || 'Không tải được danh sách');
                            $('#internalWithdrawModal').modal('hide');
                            return;
                        }
                        var src = res.source;
                        $('#internal-withdraw-source').html(
                            '<b>Tài khoản nguồn:</b> ' + src.bank + ' - ' + src.acc_no +
                            ' (' + src.acc_name + ') | Số dư: ' + numberFormat(src.balance) + ' VNĐ'
                        );
                        // Destroy select2 cũ (nếu modal đã mở trước đó) trước khi re-populate
                        if ($('#internal-withdraw-bank-out').hasClass('select2-hidden-accessible')) {
                            $('#internal-withdraw-bank-out').select2('destroy');
                        }
                        if ($('#internal-withdraw-dest-bank').hasClass('select2-hidden-accessible')) {
                            $('#internal-withdraw-dest-bank').select2('destroy');
                        }

                        var $selOut = $('#internal-withdraw-bank-out').empty()
                            .append('<option value="">-- Chọn tài khoản nhận --</option>');
                        $.each(res.bank_outs || [], function(_, b) {
                            $selOut.append($('<option>').val(b.id).text(b.label));
                        });
                        $selOut.prop('disabled', false).select2({
                            dropdownParent: $('#internalWithdrawModal'),
                            placeholder: 'Tìm theo ngân hàng / số TK / tên...',
                            allowClear: true,
                            width: '100%'
                        });

                        var $selBank = $('#internal-withdraw-dest-bank').empty()
                            .append('<option value="">-- Chọn ngân hàng --</option>');
                        $.each(res.banks || [], function(_, b) {
                            $selBank.append($('<option>').val(b.bank_code).text(b.label));
                        });
                        $selBank.prop('disabled', false).select2({
                            dropdownParent: $('#internalWithdrawModal'),
                            placeholder: 'Tìm ngân hàng theo tên / mã...',
                            allowClear: true,
                            width: '100%'
                        });

                        $('#internal-withdraw-submit-btn').prop('disabled', false);
                    },
                    error: function(xhr) {
                        toastr.error('Không tải được dữ liệu: HTTP ' + xhr.status);
                        $('#internalWithdrawModal').modal('hide');
                    }
                });
            });

            $(document).on('change', 'input[name="internal-withdraw-mode"]', function() {
                if ($(this).val() === 'manual') {
                    $('#iw-quick-block').hide();
                    $('#iw-manual-block').show();
                } else {
                    $('#iw-manual-block').hide();
                    $('#iw-quick-block').show();
                }
            });

            $(document).on('input', '.internal-withdraw-amount', function() {
                var v = (this.value || '').replace(/[^\d]/g, '');
                if (!v) {
                    this.value = '';
                    return;
                }
                this.value = v.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            });

            $(document).on('input', '#internal-withdraw-dest-accno', function() {
                this.value = (this.value || '').replace(/[^\d]/g, '');
            });

            $(document).on('click', '#internal-withdraw-submit-btn', function() {
                var $btn = $(this);
                if ($btn.data('loading')) return;
                var accountId = $('#internal-withdraw-account-id').val();
                var mode = $('input[name="internal-withdraw-mode"]:checked').val() || 'quick';
                var amountSelector = mode === 'manual' ? '#internal-withdraw-amount-manual' : '#internal-withdraw-amount-quick';
                var amount = parseInt(($(amountSelector).val() || '').replace(/[^\d]/g, ''), 10);

                if (!accountId) {
                    toastr.error('Thiếu account ID nguồn.');
                    return;
                }
                if (!amount || amount < 10000) {
                    toastr.error('Số tiền phải >= 10,000 VNĐ.');
                    return;
                }

                var payload = {
                    _token: '{{ csrf_token() }}',
                    mode: mode,
                    amount: amount,
                };
                var confirmMsg;

                if (mode === 'manual') {
                    var destBankCode = $('#internal-withdraw-dest-bank').val();
                    var destAccNo = ($('#internal-withdraw-dest-accno').val() || '').trim();
                    var destAccName = ($('#internal-withdraw-dest-accname').val() || '').trim();
                    var destBankLabel = $('#internal-withdraw-dest-bank option:selected').text();

                    if (!destBankCode) {
                        toastr.error('Vui lòng chọn ngân hàng nhận.');
                        return;
                    }
                    if (!destAccNo) {
                        toastr.error('Vui lòng nhập số tài khoản nhận.');
                        return;
                    }
                    payload.dest_bank_code = destBankCode;
                    payload.dest_acc_no = destAccNo;
                    payload.dest_acc_name = destAccName;
                    confirmMsg = 'Chuyển ' + numberFormat(amount) + ' VNĐ tới:\n' +
                        destBankLabel + ' - ' + destAccNo +
                        (destAccName ? ' (' + destAccName + ')' : '') + '?';
                } else {
                    var bankOutId = $('#internal-withdraw-bank-out').val();
                    if (!bankOutId) {
                        toastr.error('Vui lòng chọn tài khoản bank out nhận tiền.');
                        return;
                    }
                    payload.bank_out_id = bankOutId;
                    var bankOutLabel = $('#internal-withdraw-bank-out option:selected').text();
                    confirmMsg = 'Chuyển ' + numberFormat(amount) + ' VNĐ tới:\n' + bankOutLabel + '?';
                }

                if (!confirm(confirmMsg)) return;

                $btn.data('loading', true).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Đang xử lý...');
                $.ajax({
                    url: '/account/' + accountId + '/internal-withdraw',
                    type: 'POST',
                    timeout: 30000,
                    data: payload,
                    success: function(data) {
                        if (data.code == 1) {
                            toastr.success(data.msg || 'Đã đẩy deeplink thành công');
                            $('#internalWithdrawModal').modal('hide');
                        } else {
                            toastr.error(data.msg || 'Chuyển tiền thất bại');
                        }
                    },
                    error: function(xhr, textStatus) {
                        console.error('internal-withdraw error:', xhr.status, textStatus, xhr.responseText);
                        var msg = (xhr.responseJSON && xhr.responseJSON.msg)
                            || (textStatus === 'timeout' ? 'Timeout — server không phản hồi' : 'HTTP ' + xhr.status);
                        toastr.error('Đã xảy ra lỗi: ' + msg);
                    },
                    complete: function() {
                        $btn.data('loading', false).prop('disabled', false)
                            .html('<i class="fas fa-paper-plane"></i> Xác nhận chuyển tiền');
                    }
                });
            });

            $(document).on('click', '.restart-device-btn', function() {
                var $btn = $(this);
                if ($btn.data('loading')) return;
                var accountId = $btn.data('account-id');
                var deviceId = $btn.data('device-id');
                if (!confirm('Khởi động lại máy out cho device_id: ' + deviceId + ' ?')) return;
                $btn.data('loading', true).prop('disabled', true);
                $.ajax({
                    url: '/account/' + accountId + '/restart-device',
                    type: 'POST',
                    timeout: 60000,
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(data) {
                        if (data.code == 1) {
                            toastr.success(data.msg || 'Khởi động lại thành công');
                        } else {
                            toastr.error(data.msg || 'Khởi động lại thất bại');
                        }
                    },
                    error: function(xhr, textStatus) {
                        console.error('restart-device error:', xhr.status, textStatus, xhr.responseText);
                        var msg = (xhr.responseJSON && xhr.responseJSON.msg)
                            || (xhr.responseText ? xhr.responseText.substring(0, 200) : '')
                            || (textStatus === 'timeout' ? 'Timeout — server không phản hồi' : 'HTTP ' + xhr.status);
                        toastr.error('Đã xảy ra lỗi: ' + msg);
                    },
                    complete: function() {
                        $btn.data('loading', false).prop('disabled', false);
                    }
                });
            });

            $(document).on('click', '#edit-account', function() {
                const accountID = $(this).data('account-id');

                $.ajax({
                    url: '/get-account-data/' + accountID,
                    method: 'GET',
                    success: function(response) {
                        var smartOTP = response.account.register_smart_otp;
                        if (smartOTP == 1) {
                            $('#register_smart_otp').val("Đã đăng kí SmartOTP");
                        } else if (smartOTP == 0) {
                            $('#register_smart_otp').val("Lỗi đăng kí SmartOTP");
                        } else {
                            $('#register_smart_otp').val("Chưa đăng kí SmartOTP");
                        }
                        $('#account_id').val(response.account.id);
                        $('#bank_name').val(response.bank_name);
                        $('#acc_name').val(response.account.acc_name);
                        $('#acc_no').val(response.account.acc_no);
                        $('#amount_limit').val(numberFormat(response.account.amount_limit));
                        $('#auto_withdraw').val(numberFormat(response.account.auto_withdraw));
                        $('#withdraw').val(numberFormat(response.account.withdraw));
                        $('#state').val(response.account.state);
                        $('#typeAccount').val(response.account.type);
                        $('#proxy').val(response.account.proxy);
                        $('#note').val(response.account.note);
                        $('#is_block').val(response.account.is_block);
                        if (response.account.min_cashout != null) {
                            $('#min_cashout').val(numberFormat(response.account.min_cashout));
                        } else {
                            $('#min_cashout').val('');
                        }
                        if (response.account.max_cashout != null) {
                            $('#max_cashout').val(numberFormat(response.account.max_cashout));
                        } else {
                            $('#max_cashout').val('');
                        }
                        $('#remaining_limit_month').val(numberFormat(response.account
                            .remaining_limit_month));

                        if (response.account.type == 'hook') {
                            $('#partner-section').show();
                            let partner_id = response.account.partner_id;
                            $('#partner_name').val(partner_id);
                            $('#partner_name').val(partner_id).find('.partner-option[value="' +
                                partner_id + '"]').prop('selected', true);
                        } else {
                            $('#partner-section').hide();
                        }
                        if (response.bank_type == 'MOMO') {
                            $('#acc_name').prop('disabled', false);
                        } else {
                            $('#acc_name').prop('disabled', true);

                        }
                        switch (response.account.state) {
                            case false:
                                $('#not_use').prop('selected', true);
                                break;
                            case true:
                                $('#using').prop('selected', true);
                                break;
                            default:
                                break;
                        }

                        switch (response.account.is_block) {
                            case 1:
                                $('#blocked').prop('selected', true);
                                break;
                            case 2:
                                $('#need-otp').prop('selected', true);
                                break;
                            case 0:
                                $('#normal').prop('selected', true);
                                break;
                            case null:
                                $('#no_update').prop('selected', true);
                            default:
                                break;
                        }

                        switch (response.account.type) {
                            case 'receive':
                                $('#receive_money').prop('selected', true);
                                break;
                            case 'transfer':
                                $('#transfer_money').prop('selected', true);
                                break;
                            case 'receive_and_transfer':
                                $('#receive_and_transfer_money').prop('selected', true);
                                break;
                            case 'deposited_in':
                                $('#combine_money').prop('selected', true);
                                break;
                            case 'hook':
                                $('#hook').prop('selected', true);
                                break;
                            case 'check_name':
                                $('#check_name').prop('selected', true);
                                break;
                            default:
                                break;
                        }
                    },
                    error: function(error) {
                        console.error('Lỗi lấy thông tin tài khoản:', error);
                        toastr.error(error);
                    }
                });
            });

            $('#add-device').click(function() {
                var account_id = document.getElementById('account_id').value;
                window.location.href = '/bank-device/create?bank_account_id=' + account_id;
            });
            $('#manage-account-video').click(function() {
                var account_id = document.getElementById('account_id').value;
                window.location.href = '/payment/manage-bankcount-video/' + account_id;
            });

            $(document).on('click', '#btn-add-balance-bankaccount', function(e) {
                e.preventDefault();
                var accountId = $(this).data('account-id');
                var amount = $('#bankaccount-amount-' + accountId).val();
                $('#loading-overlay-add-balance-bank-account').removeClass('d-none');
                var dataTable = $('#listAccounts').DataTable();
                var pageInfo = dataTable.page.info();
                $.ajax({
                    url: "/" + accountId + "/add-balace-bankaccount",
                    type: "PUT",
                    data: {
                        _token: "{{ csrf_token() }}",
                        amount: amount
                    },
                    dataType: 'JSON',
                    success: function(response) {
                        $('#loading-overlay-add-balance-bank-account').addClass('d-none');
                        if (response.code == 1) {
                            dataTable.page(pageInfo.page).draw('page');
                            toastr.success(response.msg);
                        } else {
                            toastr.error(response.msg);
                        }
                    },
                    error: function() {
                        $('#loading-overlay-add-balance-bank-account').addClass('d-none');
                        toastr.error('Có lỗi xảy ra, vui lòng thử lại.', 'Thất bại');
                    },
                });
            });
            $(document).on('click', '#btn-withdraw-bankLK', function(e) {
                e.preventDefault();
                var accountId = $(this).data('account-id');
                var amount = $('#withdrawAmount-' + accountId).val();
                $('#loading-overlay').removeClass('d-none');
                var dataTable = $('#listAccounts').DataTable();
                var pageInfo = dataTable.page.info();
                $.ajax({
                    url: "/" + accountId + "/withdraw-to-banklk",
                    type: "PUT",
                    data: {
                        _token: "{{ csrf_token() }}",
                        amount: amount
                    },
                    dataType: 'JSON',
                    success: function(response) {
                        $('#loading-overlay').addClass('d-none');
                        if (response.code == 1) {
                            dataTable.page(pageInfo.page).draw('page');
                            toastr.success(response.msg);
                        } else {
                            toastr.error(response.msg);
                        }
                    },
                    error: function() {
                        $('#loading-overlay').addClass('d-none');
                        toastr.error('Có lỗi xảy ra, vui lòng thử lại.', 'Thất bại');
                    },
                });
            });
        });

        document.getElementById('saveButton').addEventListener('click', function(event) {
            event.preventDefault();
            saveData();
        });

        function saveData() {
            var account_id = document.getElementById('account_id').value;
            var dataTable = $('#listAccounts').DataTable();
            var pageInfo = dataTable.page.info();
            $.ajax({
                url: '/payment/' + account_id,
                type: 'PUT',
                data: $('#updateForm').serialize(),
                dataType: 'json',
                success: function(data) {
                    if (data.code == 1) {
                        $('#offcanvasRight').offcanvas('hide');
                        dataTable.page(pageInfo.page).draw('page');
                        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>
    <script>
        function getQrCode(url) {
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'JSON',
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        $('#qr-code-modal').modal('show');
                        $('#qr-code-image').attr('src', response.data.qr_code);
                    }
                },
                error: function(error) {
                    toastr.error(error);
                },
                complete: () => {
                    $('#loading-overlay').addClass('d-none');
                }
            });
        }
    </script>

    <script>
        (function($) {
            'use strict';

            // ---- Helper: render status box ----
            function setLoginWebStatus(type, message) {
                // type: info / success / danger / warning
                var html = '<div class="alert alert-' + type + ' mb-0">' + message + '</div>';
                $('#login-web-status').html(html);
            }

            // ---- PHASE 1: kích hoạt gửi OTP ----
            function loginWebPhase1(accountId, isResend) {
                setLoginWebStatus('info',
                    (isResend ? 'Đang gửi lại OTP' : 'Đang đăng nhập và kích hoạt gửi OTP') +
                    '... <i class="fas fa-spinner fa-spin"></i>'
                );
                $('#btn-login-web-submit, #btn-login-web-resend').prop('disabled', true);

                $.ajax({
                    type: 'GET',
                    url: '/payment/' + accountId + '/login-web',
                    data: {
                        action: 'PHASE1'
                    },
                    dataType: 'JSON',
                    timeout: 120000, // 2 phút cho phase 1 (có thể chậm do captcha)
                }).done(function(response) {
                    if (response.success) {
                        if (response.needsOtp === false) {
                            // Thiết bị đã tin cậy, login xong luôn
                            setLoginWebStatus('success',
                                '<i class="fas fa-check-circle"></i> ' + response.message
                            );
                            toastr.success(response.message);
                            setTimeout(function() {
                                $('#loginWebModal').modal('hide');
                                if ($.fn.DataTable.isDataTable('#listAccounts')) {
                                    $('#listAccounts').DataTable().ajax.reload(null, false);
                                }
                            }, 1500);
                        } else {
                            setLoginWebStatus('success',
                                '<i class="fas fa-mobile-alt"></i> ' + response.message
                            );
                            toastr.success('OTP đã gửi về app ACB, mời nhập');
                            $('#login-web-otp').focus();
                        }
                    } else {
                        var stepMsg = response.step ? ' (bước ' + response.step + ')' : '';
                        setLoginWebStatus('danger',
                            '<i class="fas fa-times-circle"></i> ' + response.message + stepMsg
                        );
                        toastr.error(response.message);
                    }
                }).fail(function(xhr, status) {
                    var msg = (status === 'timeout') ?
                        'Quá thời gian chờ phản hồi' :
                        'Có lỗi kết nối: ' + status;
                    setLoginWebStatus('danger', '<i class="fas fa-times-circle"></i> ' + msg);
                    toastr.error(msg);
                }).always(function() {
                    $('#btn-login-web-submit, #btn-login-web-resend').prop('disabled', false);
                });
            }

            // ---- PHASE 2: submit OTP ----
            function loginWebPhase2(accountId, otp) {
                setLoginWebStatus('info',
                    'Đang xác thực OTP... <i class="fas fa-spinner fa-spin"></i>'
                );
                $('#btn-login-web-submit, #btn-login-web-resend').prop('disabled', true);

                $.ajax({
                    type: 'GET',
                    url: '/payment/' + accountId + '/login-web',
                    data: {
                        action: 'PHASE2',
                        otp: otp
                    },
                    dataType: 'JSON',
                    timeout: 60000,
                }).done(function(response) {
                    if (response.success) {
                        setLoginWebStatus('success',
                            '<i class="fas fa-check-circle"></i> ' + response.message
                        );
                        toastr.success(response.message);
                        setTimeout(function() {
                            $('#loginWebModal').modal('hide');
                            if ($.fn.DataTable.isDataTable('#listAccounts')) {
                                $('#listAccounts').DataTable().ajax.reload(null, false);
                            }
                        }, 1500);
                    } else {
                        var stepMsg = response.step ? ' (bước ' + response.step + ')' : '';
                        setLoginWebStatus('danger',
                            '<i class="fas fa-times-circle"></i> ' + response.message + stepMsg
                        );
                        toastr.error(response.message);
                    }
                }).fail(function(xhr, status) {
                    var msg = 'Có lỗi kết nối: ' + status;
                    setLoginWebStatus('danger', '<i class="fas fa-times-circle"></i> ' + msg);
                    toastr.error(msg);
                }).always(function() {
                    $('#btn-login-web-submit, #btn-login-web-resend').prop('disabled', false);
                });
            }

            // ---- Click nút "Login Web" trong dropdown ----
            $(document).on('click', '.login-web-bank-account', function(e) {
                e.preventDefault();
                var accountId = $(this).data('account-id');
                var username = $(this).data('account-username');

                $('#login-web-account-id').val(accountId);
                $('#login-web-username-display').text(username || '#' + accountId);
                $('#login-web-otp').val('');
                $('#login-web-status').html('');

                $('#loginWebModal').modal('show');

                // Tự động trigger phase 1 ngay khi mở modal
                loginWebPhase1(accountId, false);
            });

            // ---- Click "Gửi lại OTP" ----
            $(document).on('click', '#btn-login-web-resend', function(e) {
                e.preventDefault();
                var accountId = $('#login-web-account-id').val();
                if (!accountId) return;
                $('#login-web-otp').val('');
                loginWebPhase1(accountId, true);
            });

            // ---- Click "Xác nhận" (submit OTP) ----
            $(document).on('click', '#btn-login-web-submit', function(e) {
                e.preventDefault();
                var accountId = $('#login-web-account-id').val();
                var otp = $.trim($('#login-web-otp').val());

                if (!accountId) return;
                if (!otp) {
                    toastr.error('Vui lòng nhập OTP');
                    $('#login-web-otp').focus();
                    return;
                }
                loginWebPhase2(accountId, otp);
            });

            // ---- Enter trong ô OTP = bấm Xác nhận ----
            $(document).on('keypress', '#login-web-otp', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $('#btn-login-web-submit').click();
                }
            });
        })(jQuery);
    </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') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <style>
        #internalWithdrawModal .modal-dialog {
            max-width: 1100px;
            width: 90vw;
        }

        #internalWithdrawModal .modal-content {
            min-height: 600px;
            display: flex;
            flex-direction: column;
        }

        #internalWithdrawModal .modal-body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            padding: 1.5rem 2rem;
        }

        #internalWithdrawModal .modal-body form {
            flex: 1 1 auto;
        }

        #internalWithdrawModal #internal-withdraw-source {
            font-size: 0.95rem;
        }

        #internalWithdrawModal .form-group label {
            font-weight: 600;
        }

        #internalWithdrawModal .form-control {
            height: 42px;
            font-size: 1rem;
        }

        #internalWithdrawModal .select2-container--default .select2-selection--single {
            height: 42px;
            padding: 6px 4px;
        }

        #internalWithdrawModal .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 28px;
        }

        #internalWithdrawModal .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px;
        }

        #internalWithdrawModal .select2-container {
            width: 100% !important;
        }

        @media (max-width: 768px) {
            #internalWithdrawModal .modal-dialog {
                max-width: 95vw;
                width: 95vw;
                margin: 1rem auto;
            }
            #internalWithdrawModal .modal-content {
                min-height: auto;
            }
            #internalWithdrawModal .modal-body {
                padding: 1rem;
            }
        }

        .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;
        }

        table tbody {
            {{ $tableBodyStyle }}
        }

        .offcanvas.show {
            width: 1000px;
            transform: translateX(0);
            /* Đẩy offcanvas về phải khi mở */
            height: 100%;
            /* Chiều cao 100% để nó mở rộng theo chiều dài của body */
        }

        .offcanvas-body {
            overflow-y: auto;
            /* Cho phép cuộn bên trong offcanvas-body nếu nó quá dài */
            height: 100%;
            /* 100% chiều cao để lấp đầy không gian */
        }

        .modal-lg {
            max-width: 80%;
            /* Điều chỉnh kích thước modal */
        }

        .modal-lg .modal-dialog {
            width: 100%;
            /* Điều chỉnh kích thước modal */
            margin: 0 auto;
            /* Canh giữa modal */
        }

        #qr-code-image {
            width: 30%;
        }

        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }

        #loading-overlay,
        #loading-overlay-add-balance-bank-account {
            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-overlay .spinner-border {
            width: 4rem;
            height: 4rem;
            margin-bottom: 10px;
        }

        #loading-overlay-add-balance-bank-account .spinner-border {
            width: 4rem;
            height: 4rem;
            margin-bottom: 10px;
        }

        #loading-overlay .loading-text {
            font-size: 18px;
            color: #fff;
        }

        #loading-overlay-add-balance-bank-account .loading-text {
            font-size: 18px;
            color: #fff;
        }
    </style>
@endsection