@extends('layouts.app')

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

@section('cashout')
    active
@endsection

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

        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            @php
                $tableBodyStyle = $isDemoAccount ? 'display: none;' : '';
            @endphp
            <div id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
            </div>
            <div class="col-sm-8 row">
                <p>{{ __('List of banks maintaining withdrawals: ') }}
                    <b>{{ \App\Models\Bank\BankMaintenance::listBankOutMaintenances() }}
                    </b>
                    @can('bank_maintenance')
                        <a target="_blank" href="{{ route('app.cashout.bankMaintenance') }}">[{{ __('Edit') }}]</a>
                    @endcan
                </p>
                <p>{{ __('Danh sách số tài khoản chặn: ') }}
                    @role('admin')
                        <a target="_blank" href="{{ route('app.cashout.blockedAccount') }}">[{{ __('Thêm') }}]</a>
                    @endrole
                </p>
            </div>
            <div class="card-body" style="background-color: #9fb69f">
                <form class="row" id="search-cashout">
                    @csrf
                    @role('admin|support')
                        <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">{{ __('partner') }}</span>
                                    </div>
                                    <select id="partner" name="partner" class="select2 form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getAllUsers() as $partner)
                                            <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    @role('accountant')
                        <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">{{ __('partner') }}</span>
                                    </div>
                                    <select name="partner" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getPartnerAccountantCanView() as $partner)
                                            <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    <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">{{ __('status') }}</span>
                                </div>
                                <select name="status" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    @foreach (TRANSACTION_STATUS as $key => $value)
                                        <option value="{{ $key }}">{{ __($value) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('create_time') }}</span>
                                </div>

                                <input type="text" class="form-control" name="from_create_date" id="from_create_date"
                                    autocomplete="off" placeholder="DD-MM-YYYY HH:mm:ss">
                                <input type="text" class="form-control" name="to_create_date" id="to_create_date"
                                    autocomplete="off" placeholder="DD-MM-YYYY HH:mm:ss">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('complete_time') }}</span>
                                </div>

                                <input type="text" class="form-control" name="from_complete_date" id="from_complete_date"
                                    autocomplete="off" placeholder="DD-MM-YYYY HH:mm:ss">
                                <input type="text" class="form-control" name="to_complete_date" id="to_complete_date"
                                    autocomplete="off" placeholder="DD-MM-YYYY HH:mm:ss">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('money_range') }}</span>
                                </div>
                                <input type="text" class="form-control amount-cashout" id="amount_from"
                                    name="amount_from" placeholder="{{ __('from') }}">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">-</span>
                                </div>
                                <input type="text" class="form-control amount-cashout" id="amount_to" name="amount_to"
                                    placeholder="{{ __('to') }}">
                            </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">{{ __('request_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="request_id"
                                    placeholder="{{ __('request_id') }}">
                            </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">{{ __('order_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="cash_out_id"
                                    placeholder="{{ __('order_id') }}">
                            </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">{{ __('Số tài khoản') }}</span>
                                </div>
                                <input type="text" class="form-control" name="bank_account"
                                    placeholder="{{ __('Số tài khoản') }}">
                            </div>
                        </div>
                    </div>
                    @role('admin')
                        <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">{{ __('Xử lý bởi') }}</span>
                                    </div>
                                    <select name="handler" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        <option value="Hệ thống">{{ __('Hệ thống') }}</option>
                                        <option value="user">{{ __('Người dùng') }}</option>
                                        @foreach (\App\Models\User\User::getSupportUserForCashout() as $partner)
                                            <option value="{{ $partner->username }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole

                    <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">{{ __('Cổng xử lí') }}</span>
                                </div>
                                <select name="gate" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    @foreach (\App\Models\Gate\Gate::all() as $item)
                                        <option value="{{ $item->name }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <button type="submit" class="btn btn-primary" id="btn-search"><i
                                class="fa fa-search"></i>{{ __('search') }}</button>
                        <button type="submit" class="btn btn-secondary"
                            id="btn-total-cashout">{{ __('report') }}</button>
                    </div>
                    <span id="date-error" class="text-danger"></span>
                </form>
            </div>
        </div>
        @if (Session::has('success'))
            <div id="message-alert" class="alert alert-success">
                {{ Session::get('success') }}
            </div>
        @endif
        @if (Session::has('error'))
            <div id="message-alert" class="alert alert-danger">
                {{ Session::get('error') }}
            </div>
        @endif
        <div 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">{{ __('calculating_please_wait') }}</div>
        </div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('transaction_list') }}</h3>
                <div class="card-tools">
                    @role('partner|admin')
                        @if (Auth::user()->split || in_array(Auth::user()->username, ['admin', 'dev001']))
                            <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="offcanvas"
                                title="{{ __('Thêm Cashout') }}" data-bs-target="#offcanvasRightCreateCashout"
                                id="offcanvasRightCreateCashoutButton" aria-controls="offcanvasRightCreateCashout">
                                <span>{{ __('Tạo Cashout') }}</span>
                            </button>
                        @endif
                    @endrole
                    @if (in_array(Auth::user()->username, ['admin', 'dev001', 'chiba', 'taiwan99999', 'uchi', 'coco', 'kimmochi96']))
                        <a href="{{ route('app.cashout.approvers') }}" class="btn btn-dark btn-sm"
                            title="{{ __(':username Telegram được phép duyệt/huỷ đơn (theo nhóm)', ['username' => '@' . 'username']) }}">
                            <i class="fa-solid fa-user-shield"></i> {{ __('Quyền duyệt đơn (TG)') }}
                        </a>
                    @endif
                    @role('admin|support')
                        <button type="button" class="btn btn-info" data-bs-toggle="modal"
                            data-bs-target="#processingStatsModal">
                            <i class="bx bx-bar-chart-alt-2 me-1"></i> {{ __('Thống kê thời gian xử lý') }}
                        </button>
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-gear"></i> Columns
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <div class="row p-2" style="width: 600px;">
                                @foreach ($getColumnfilter as $column)
                                    <div class="col-lg-6">
                                        <label class="dropdown-item toggle-vis" data-column="{{ $column['data_column'] }}">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                    id="data_column_{{ $column['data_column'] }}" checked />
                                                {{ $column['label'] }}
                                            </div>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </ul>
                    @endrole
                    @role('admin|support')
                        @can('cashout_actions')
                            <button class="btn btn-sm btn-success d-none" id="completeAllBtn">
                                {{ __('Hoàn thành đơn') }}
                            </button>
                        @endcan
                        <button class="btn btn-sm btn-danger d-none" id="cancelAllBtn">
                            {{ __('Hủy đơn') }}
                        </button>
                        <button class="btn btn-sm btn-danger d-none" id="selectGatePaymentBtn">
                            {{ __('Chọn cổng thanh toán') }}
                        </button>

                        <button id="refresh-btn" class="btn btn-info btn-sm" data-auto-refresh="false">
                            <i class="fa fa-refresh" aria-hidden="true"></i>
                            <span id="refresh-text">{{ __('Auto refresh: Off') }}</span>
                        </button>
                    @endrole
                    <a class="btn btn-sm btn-secondary" id="export-cash-out" href="javascript:void(0)"><i
                            class="fa-solid fa-file-excel"></i>{{ __('export_excel') }}</a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="listCashouts">
                        <thead style="text-align: center;  background-color: #b6b9b6"">
                            <tr>
                                <th><input type="checkbox" name="main_checkbox" class="wide-checkbox"><label></label>
                                </th>
                                <th>{{ __('order_id') }}</th>
                                <th>{{ __('request_id') }}</th>
                                <th>{{ __('partner') }}</th>
                                <th>{{ __('handler') }}</th>
                                <th>{{ __('detail') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('approval') }}</th>
                                <th>{{ __('fee') }}</th>
                                <th>{{ __('balance') }}</th>
                                <th>{{ __('create_complete') }}</th>
                                <th>{{ __('processing_time') }}</th>
                                <th>{{ __('Callback') }}</th>
                                <th class=" collapse-column">{{ __('response') }}</th>
                                <th>{{ __('Cổng xử lí') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="modal fade" id="cashoutTotalModal" tabindex="-1" aria-labelledby="cashoutTotalModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-center" id="cashoutTotalModalLabel">
                                {{ __('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>{{ __('total_amount') }}</td>
                                                <td><span id="totalRealAmountTransfer"></span></td>
                                            </tr>
                                            <tr style="background-color: #55da5c">
                                                <td>{{ __('total_amount_processed') }}</td>
                                                <td><span id="totalAmountProcessed"></span></td>
                                            </tr>
                                            <tr>
                                                <td>{{ __('transaction_number') }}</td>
                                                <td><span id="totalTransactions"></span></td>
                                            </tr>
                                            <tr style="background-color: #55da5c">
                                                <td>{{ __('successful_transaction') }}</td>
                                                <td><span id="totalSuccessTransactions"></span></td>
                                            </tr>
                                            <tr style="background-color: #4b944f">
                                                <td>{{ __('percentage') }}</td>
                                                <td><span id="successTransactionPercentage"></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>

            <div class="modal fade" id="cashout-modal" tabindex="-1" aria-labelledby="cashout-modal-label"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="col-5">
                                <h3 class="modal-title text-center" id="cashoutTransferMoneyModalLabel">
                                    {{ __('Chuyển tiền cashout') }}
                                </h3>
                            </div>
                            <div class="col-5">
                                <div class="row">
                                    <div class="col-10">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">{{ __('CashOut ID') }}</span>
                                            </div>
                                            <input type="text" class="form-control" id="cash-out-id" readonly>
                                        </div>
                                    </div>
                                    <div class="col-2 text-right">
                                        <button type="button" class="close" data-bs-dismiss="modal"
                                            aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-body">
                            <div class="card">
                                <div class="card-body">
                                    <form class="row" method="POST" id="transfer-money-cashout-form">
                                        @csrf
                                        @method('PUT')
                                        <div class="col-lg-6">
                                            <h6 class="text-center">{{ __('Thông tin người nhận') }}</h6>
                                            <hr>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text title-color d-block"
                                                                style="width: 120px;">{{ __('Ngân hàng') }}</span>
                                                        </div>
                                                        <input type="text" class="form-control" id="bank"
                                                            disabled>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text title-color d-block"
                                                                style="width: 120px;">{{ __('Số tài khoản') }}</span>
                                                        </div>
                                                        <input type="text" class="form-control" id="bank-account"
                                                            readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text title-color d-block"
                                                                style="width: 120px;">{{ __('Chủ tài khoản') }}</span>
                                                        </div>
                                                        <input type="text" class="form-control" id="customer-name"
                                                            readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text title-color d-block"
                                                                style="width: 120px;">{{ __('Số tiền') }}</span>
                                                        </div>
                                                        <input type="text" class="form-control" id="amount"
                                                            readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text title-color d-block"
                                                                style="width: 120px;">{{ __('Nội dung') }}</span>
                                                        </div>
                                                        <input type="text" class="form-control" id="content"
                                                            readonly>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <h6 class="text-center">{{ __('Thông tin thanh toán') }}</h6>
                                            <hr>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label
                                                        for="bank-account-transfer">{{ __('Tài khoản chuyển*') }}</label>

                                                    <select name="bank_account_transfer" id="bank_account_transfer"
                                                        class="form-control">
                                                        <option value="">
                                                            {{ __('--Chọn tài khoản chuyển--') }}
                                                        </option>
                                                    </select>
                                                    @error('bank_account_transfer')
                                                        <span class="text-danger">* {{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="auth-method">{{ __('Phương thức nhận mã OTP ') }}
                                                        <span class="text-danger">*</span></label>
                                                    <select name="auth_method" id="auth-method" class="form-control">
                                                    </select>
                                                    @error('bank_name')
                                                        <span class="text-danger">* {{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-12" id="col-otp">
                                                <div class="form-group">
                                                    <label for="auth-method">{{ __('Mã xác thực OTP') }}
                                                        <span class="text-danger">*</span></label>
                                                    <input type="number" name="otp" id="otp"
                                                        class="form-control"
                                                        placeholder="{{ __('Nhập mã xác thực OTP') }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="alert alert-info text-center d-none" id="content-alert">
                                                    <h6 id="content-text"></h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="text-center">
                                                <button class="btn btn-success" type="submit"
                                                    id="btn-submit">{{ __('Xác nhận chuyển') }}</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">{{ __('close') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="qr-code-modal" tabindex="-1" aria-labelledby="qr-code-label"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="qr-code-label">
                                {{ __('Thông tin chuyển 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 class="row">
                                                <span>{{ __('Số tiền:') }} <strong><span
                                                            id="transfer-amount"></span></strong></span><br>
                                                <span>{{ __('Số tài khoản:') }} <strong><span
                                                            id="account-number"></span></strong></span><br>
                                                <span>{{ __('Chủ tài khoản:') }} <strong><span
                                                            id="account-holder"></span></strong></span><br>
                                                <span>{{ __('Nội dung:') }} <strong><span id="transfer-content"></span></strong></span>
                                                <div class="d-flex justify-content-center">
                                                    <button class="col-7 btn btn-success mt-2" data-cashout-id=""
                                                        data-acticon="success-manual" id="success-flash-modal-btn"><i
                                                            class="fa-solid fa-bolt-lightning me-2"></i>{{ __('Hoàn Thành ngay') }}
                                                        </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <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="button" class="btn btn-primary"
                                                    id="btn-search-transaction"><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="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
                aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasRightLabel">{{ __('Edit Cashout') }}</h5>
                    <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="cashout_id" id="cashout_id">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="request-id">{{ __('request_id') }}</label>
                                <input type="text" class="form-control" id="request_id" disabled>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="partner">{{ __('partner') }}</label>
                                <input type="text" class="form-control" id="partner" disabled>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <label for="status">{{ __('status') }}</label>
                                    <select name="status" id="status" class="form-control">
                                        <option value="0" id="error">{{ __('error') }}</option>
                                        <option value="3" id="pending">{{ __('Waiting for processing') }}
                                        </option>
                                        <option value="4" id="processed">{{ __('processed') }}</option>
                                        <option value="5" style="background-color: yellow" id="processing" disabled>
                                            {{ __('processing') }}
                                        </option>
                                        <option value="6" style="background-color: yellow" id="validate" disabled>
                                            {{ __('Validating') }}
                                        </option>
                                        <option value="7" style="background-color: yellow" id="start_handling"
                                            disabled>{{ __('Start processing') }}</option>
                                        <option value="8" style="background-color: yellow" id="check" disabled>
                                            {{ __('Check again') }}
                                        </option>

                                    </select>
                                    <input type="hidden" name="disabled_status" id="disabled_status">
                                </div>

                                <div class="form-group col-lg-6">
                                    <label for="is_approved">{{ __('State') }}</label>
                                    <select name="is_approved" id="is_approved" class="form-control">
                                        <option value="0" id="wait_approve">{{ __('Waiting for approval') }}
                                        </option>
                                        <option value="1" id="approved">{{ __('Approved') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <label for="fee">{{ __('fee') }}</label>
                                    <input type="number" class="form-control" name="fee" id="fee"
                                        pattern="[0-9,.]+" disabled>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="balance">{{ __('balance') }}</label>
                                    <input type="text" class="form-control" id="balance" name="balance"
                                        pattern="[0-9,.]+" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="error-message">{{ __('response') }}</label>
                                <textarea type="text" class="form-control" name="error_message" placeholder="{{ __('response') }}"
                                    id="error_message"></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>
                                    {{ __('Save') }}</button>
                            </div>
                        </div>
                    </form>
                    <div class="row align-content-center align-items-center mt-2">
                        <strong>{{ __('Quick response:') }}</strong>
                        <div class="col-lg-8 mt-2">
                            <li class="list-group-item cashout-content"
                                data-cashout-content="Đơn chuyển tiền hoàn thành">
                                {{ __('Money transfer application completed') }}
                            </li>
                        </div>
                        <div class="col-lg-8 mt-2">
                            <li class="list-group-item cashout-content"
                                data-cashout-content="Thông tin thụ hưởng không hợp lệ.">
                                {{ __('Invalid beneficiary information.') }}
                            </li>
                        </div>
                        <div class="col-lg-8 mt-2">
                            <li class="list-group-item cashout-content"
                                data-cashout-content="Thông tin người nhận không trùng khớp.">
                                {{ __('Recipient information does not match') }}
                            </li>
                        </div>
                        <div class="col-lg-8 mt-2">
                            <li class="list-group-item cashout-content" data-cashout-content="Giao dịch chờ tra soát!">
                                {{ __('Transaction pending review!') }}
                            </li>
                        </div>
                        <div class="col-lg-8 mt-2">
                            <li class="list-group-item cashout-content"
                                data-cashout-content="Ngân hàng nhận đang bảo trì!">
                                {{ __('The receiving bank is under maintenance!') }}
                            </li>
                        </div>
                        <div class="col-lg-8 mt-2">
                            <li class="list-group-item cashout-content"
                                data-cashout-content="Hệ thống payout đang gặp lỗi. Đơn hàng đã được hủy và hoàn tiền!">
                                {{ __('The payout system is experiencing an error. Order has been canceled and refunded!') }}
                            </li>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="showBillTransactionSuccessModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <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="show-bill-here"></div>
                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-outline-danger"
                                    data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @php
                $colors = ['btn-primary', 'btn-success', 'btn-danger', 'btn-warning', 'btn-info', 'btn-dark'];
            @endphp
            <div class="modal fade" id="selectGatewayModal" tabindex="-1" aria-labelledby="selectGatewayModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="selectGatewayModalLabel">{{ __('Chọn Cổng Thanh Toán') }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="d-grid gap-2">
                                @foreach (\App\Models\Gate\Gate::where('type', '!=', 'card')->get() as $gateway)
                                    <a class="btn gateway-btn {{ $colors[$gateway->id % count($colors)] }}"
                                        data-gateway-id="{{ $gateway->id }} "
                                        data-gateway-name="{{ $gateway->name }} ">
                                        <i class="fa-solid"></i> {{ $gateway->name }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRightCreateCashout"
                aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasRightLabel">{{ __('Tạo CashOut') }}</h5>
                    <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="formCreateCashout">
                        @csrf

                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="bank_account">{{ __('Số tài khoản(*)') }}</label>
                                    <input type="text" class="form-control" id="bank_account" name="bank_account"
                                        placeholder="{{ __('Nhập số tài khoản nhận') }}">
                                    @error('bank_account')
                                        <span class="text-danger">* {{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="bank_code">{{ __('Ngân hàng(*)') }}</label>
                                    <div class="col-lg-12">
                                        <select name="bank_name" id="bank_name" class="form-control select2">
                                            <option value="">{{ __('select_bank_name') }}</option>
                                            @foreach (config('bank') as $bank)
                                                <option value="{{ $bank['bank_code'] }}"
                                                    @if (old('bank_name') == $bank['bank_code']) selected @endif>
                                                    {{ $bank['bank_name'] }} ({{ $bank['display_name'] ?? '' }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('bank_name')
                                        <span class="text-danger">* {{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="customer_name">{{ __('Tên chủ tài khoản(*)') }}</label>
                                    <input type="text" class="form-control" id="customer_name" name="customer_name"
                                        placeholder="{{ __('Nhập tên chủ tài khoản') }}">
                                    @error('customer_name')
                                        <span class="text-danger">* {{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="amount">{{ __('Số tiền(*)') }}</label>
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control amount-cashout" id="amount"
                                        name="amount" placeholder="{{ __('Nhập số tiền') }}">
                                    @error('amount')
                                        <span class="text-danger">* {{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="text-center">
                                <button type="submit" id="createCashout" class="btn btn-success">
                                    <span id="spinner-create-cashout" class="spinner-border spinner-border-sm mr-2"
                                        role="status" aria-hidden="true" style="display: none;"></span>
                                    <i class="fas fa-save"></i> <span
                                        id="button-text-create-cashout">{{ __('Tạo Cashout') }}</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal fade" id="processingStatsModal" tabindex="-1" aria-labelledby="processingStatsModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="processingStatsModalLabel">{{ __('Thống kê thời gian xử lý đơn thành công') }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div id="processing-stats-loading" class="text-center py-4 d-none">
                                <div class="spinner-border text-primary" role="status"></div>
                            </div>

                            <div id="processing-stats-content">
                                <div class="row g-3 mb-3">
                                    <div class="col-md-3">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body text-center">
                                                <div class="text-muted small">{{ __('Tổng đơn thành công') }}</div>
                                                <div class="fs-4 fw-bold" id="stats-total-success">0</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body text-center">
                                                <div class="text-muted small">{{ __('< 1 phút') }}</div>
                                                <div class="fs-4 fw-bold text-success" id="stats-lt-1m">0</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body text-center">
                                                <div class="text-muted small">{{ __('1 - 3 phút') }}</div>
                                                <div class="fs-4 fw-bold text-success" id="stats-1-3m">0</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body text-center">
                                                <div class="text-muted small">{{ __('3 - 5 phút') }}</div>
                                                <div class="fs-4 fw-bold text-warning" id="stats-3-5m">0</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-3 mb-3">
                                    <div class="col-md-3">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body text-center">
                                                <div class="text-muted small">{{ __('5 - 10 phút') }}</div>
                                                <div class="fs-4 fw-bold text-info" id="stats-5-10m">0</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body text-center">
                                                <div class="text-muted small">{{ __('> 10 phút') }}</div>
                                                <div class="fs-4 fw-bold text-danger" id="stats-gt-10m">0</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-bordered align-middle mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>{{ __('Khoảng thời gian') }}</th>
                                                <th class="text-center">{{ __('Số đơn') }}</th>
                                                <th class="text-center">{{ __('Tỷ lệ') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="processing-stats-table-body">
                                            <tr>
                                                <td>{{ __('< 1 phút') }}</td>
                                                <td class="text-center" id="table-lt-1m">0</td>
                                                <td class="text-center" id="table-lt-1m-percent">0%</td>
                                            </tr>
                                            <tr>
                                                <td>{{ __('1 - 3 phút') }}</td>
                                                <td class="text-center" id="table-1-3m">0</td>
                                                <td class="text-center" id="table-1-3m-percent">0%</td>
                                            </tr>
                                            <tr>
                                                <td>{{ __('3 - 5 phút') }}</td>
                                                <td class="text-center" id="table-3-5m">0</td>
                                                <td class="text-center" id="table-3-5m-percent">0%</td>
                                            </tr>
                                            <tr>
                                                <td>{{ __('5 - 10 phút') }}</td>
                                                <td class="text-center" id="table-5-10m">0</td>
                                                <td class="text-center" id="table-5-10m-percent">0%</td>
                                            </tr>
                                            <tr>
                                                <td>{{ __('> 10 phút') }}</td>
                                                <td class="text-center" id="table-gt-10m">0</td>
                                                <td class="text-center" id="table-gt-10m-percent">0%</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="small text-muted mt-3" id="processing-stats-note"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('scripts')
    <!-- DataTables  & Plugins -->
    <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 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
    </script>
    <script type="text/javascript"
        src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script>
        $('#bank_name').select2({
            dropdownParent: $('#offcanvasRightCreateCashout'),
            width: '100%'
        });
        document.addEventListener('DOMContentLoaded', function() {
            var amountInputs = document.querySelectorAll('.amount-cashout');

            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>
    @if (request()->user()->hasRole('admin|support'))
        <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);
                            $('#account-number').text(response.data.acc_no);
                            $('#account-holder').text(response.data.acc_name);
                            $('#transfer-amount').text(response.data.amount);
                            $('#transfer-content').text(response.data.comment);
                            $('#success-flash-modal-btn').data('cashout-id', response.data.cashout_id);
                            if (response.data.status == 4) {
                                $('#success-flash-modal-btn').hide();
                                if ($('#order-success-msg').length === 0) {
                                    $('#success-flash-modal-btn').after(`
                                        <button class="btn btn-danger mt-3" id="order-success-msg" disabled>
                                            ${ {{ \Illuminate\Support\Js::from(__('Đơn hàng đã thành công')) }} }
                                        </button>
                                    `);
                                }
                            }
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(error) {
                        toastr.error(error);
                    },
                    complete: () => {
                        $('#loading-overlay').addClass('d-none');
                    }
                });
            }
        </script>
    @endif
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    @if (app()->getLocale() === 'vi')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/vi.min.js"></script>
    @elseif (app()->getLocale() === 'zh')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/zh-cn.min.js"></script>
    @endif
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js">
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var amountInputs = document.querySelectorAll('.amount-cashout');

            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>
        $(document).ready(function() {
            $('#bank_account_transfer').select2();
            $('#partner').select2({
                width: '100%',
                placeholder: "{{ __('select') }}",
                allowClear: true
            });
        });
    </script>
    <script>
        $(function() {
            // Lịch chọn ngày theo ngôn ngữ đang chọn (en dùng mặc định của moment).
            moment.locale({{ \Illuminate\Support\Js::from(['vi' => 'vi', 'zh' => 'zh-cn'][app()->getLocale()] ?? 'en') }});

            const FORMAT = 'DD-MM-YYYY HH:mm:ss';

            function initPicker(selector) {
                $(selector).datetimepicker({
                    format: FORMAT,
                    sideBySide: true,
                    showClear: true,
                    showClose: true,
                    useCurrent: false
                });

                // strict normalize khi gõ tay
                $(selector).on('blur', function() {
                    const v = ($(this).val() || '').trim();
                    if (!v) return;
                    const m = moment(v, FORMAT, true);
                    if (!m.isValid()) {
                        $(this).val(''); // invalid => clear
                    } else {
                        $(this).val(m.format(FORMAT));
                    }
                });
            }

            // init 4 input
            initPicker('#from_create_date');
            initPicker('#to_create_date');
            initPicker('#from_complete_date');
            initPicker('#to_complete_date');

            // DEFAULT giống Cashin: create = hôm nay 00:00:00 -> 23:59:59
            const startToday = moment().startOf('day');
            const endToday = moment().endOf('day');

            $('#from_create_date').val(startToday.format(FORMAT));
            $('#to_create_date').val(endToday.format(FORMAT));

            // complete time: để trống thật sự
            $('#from_complete_date').val('');
            $('#to_complete_date').val('');
        });

        const CASHOUT_DT_FORMAT = 'DD-MM-YYYY HH:mm:ss';

        function parseDT(v) {
            v = (v || '').trim();
            if (!v) return null;
            const m = moment(v, CASHOUT_DT_FORMAT, true);
            return m.isValid() ? m : null;
        }

        function validateRange(fromVal, toVal, maxDays) {
            const from = parseDT(fromVal);
            const to = parseDT(toVal);

            // nếu 1 trong 2 có, thì cả 2 phải hợp lệ
            if ((fromVal && !from) || (toVal && !to)) return {
                ok: false,
                msg: {{ \Illuminate\Support\Js::from(__('Thời gian không đúng định dạng.')) }}
            };

            // nếu cả 2 rỗng => ok
            if (!from && !to) return {
                ok: true
            };

            // nếu chỉ nhập 1 đầu => báo
            if (!from || !to) return {
                ok: false,
                msg: {{ \Illuminate\Support\Js::from(__('Vui lòng nhập đủ cả ngày bắt đầu và ngày kết thúc.')) }}
            };

            if (from.isAfter(to)) return {
                ok: false,
                msg: {{ \Illuminate\Support\Js::from(__('Ngày bắt đầu phải nhỏ hơn hoặc bằng ngày kết thúc.')) }}
            };

            const diffDays = to.diff(from, 'days', true);
            if (diffDays > maxDays) return {
                ok: false,
                msg: {{ \Illuminate\Support\Js::from(__('Khoảng thời gian không được lớn hơn :days ngày.')) }}.replace(':days', maxDays)
            };

            return {
                ok: true
            };
        }

        $('#export-cash-out').click(function(e) {
            e.preventDefault();

            const vCreate = validateRange($('#from_create_date').val(), $('#to_create_date').val(), 31);
            if (!vCreate.ok) {
                $('#date-error').text(vCreate.msg);
                return;
            }

            const vDone = validateRange($('#from_complete_date').val(), $('#to_complete_date').val(), 31);
            if (!vDone.ok) {
                $('#date-error').text(vDone.msg);
                return;
            }

            $('#date-error').text('');
            $('#loading-overlay').removeClass('d-none');

            // File do queue worker 'export' tạo — tải ở trang quản lí file.
            $.ajax({
                url: "{{ route('app.exportCashOut') }}",
                type: "POST",
                data: $('#search-cashout').serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#loading-overlay').addClass('d-none');
                    if (response.success) {
                        toastr.success(response.message ||
                            {{ \Illuminate\Support\Js::from(__('Đang tạo file, vui lòng vào "Quản lí file tải xuống" để tải.')) }});
                        // Sang trang quan li file de nguoi dung thay ngay tien do.
                        setTimeout(function() {
                            window.location.href = "{{ route('app.file.index') }}";
                        }, 3000);
                    } else {
                        toastr.error(response.message || {{ \Illuminate\Support\Js::from(__('Có lỗi khi xuất file.')) }});
                    }
                },
                error: function(xhr) {
                    $('#loading-overlay').addClass('d-none');
                    const msg = (xhr.responseJSON && xhr.responseJSON.message) ||
                        {{ \Illuminate\Support\Js::from(__('Có lỗi khi xuất file. Vui lòng thử lại.')) }};
                    toastr.error(msg);
                }
            });
        });
    </script>
    <script>
        jQuery(document).ready(function($) {
            var userRole = "{{ checkRoleUser() }}";
            var dataTable = $('#listCashouts').DataTable({
                dom: 'lirtp',
                processing: true,
                serverSide: true,
                'pageLength': 20,
                'pagingType': 'input',
                'aLengthMenu': [
                    [20, 50, 100, 200],
                    [20, 50, 100, 200]
                ],
                ajax: {
                    url: "{{ route('app.cashoutData') }}",
                    type: 'GET',
                    data: function(d) {
                        d.partner = $('#search-cashout [name="partner"]').val();
                        d.status = $('#search-cashout [name="status"]').val();
                        d.from_create_date = $('#search-cashout [name="from_create_date"]').val();
                        d.to_create_date = $('#search-cashout [name="to_create_date"]').val();
                        d.from_complete_date = $('#search-cashout [name="from_complete_date"]').val();
                        d.to_complete_date = $('#search-cashout [name="to_complete_date"]').val();
                        d.amount_from = $('#search-cashout [name="amount_from"]').val();
                        d.amount_to = $('#search-cashout [name="amount_to"]').val();
                        d.account_sender = $('#search-cashout [name="account_sender"]').val();
                        d.cash_out_id = $('#search-cashout [name="cash_out_id"]').val();
                        d.request_id = $('#search-cashout [name="request_id"]').val();
                        d.bank_account = $('#search-cashout [name="bank_account"]').val();
                        d.handler = $('#search-cashout [name="handler"]').val();
                        d.manual_approval = $('#search-cashout [name="manual_approval"]').val();
                        d.gate = $('#search-cashout [name="gate"]').val();
                    },
                    error: function(xhr, status, error) {
                        if (status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        className: 'text-center wide-checkbox',
                        searchable: false,
                        visible: userRole,
                    },
                    {
                        data: 'cash_out_id',
                        className: 'text-center',
                    },
                    {
                        data: 'request_id',
                        className: 'text-center',
                    },
                    {
                        data: 'user',
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: 'handler',
                        orderable: false,
                        searchable: true,
                        className: 'text-center',
                    },
                    {
                        data: 'details',
                        orderable: false,
                    },
                    {
                        data: 'status',
                        render: (data) => {
                            if (data === 0) {
                                return `<span class="badge bg-danger">{{ __('error') }}</span>`
                            } else if (data === 1) {
                                return `<span class="badge bg-success">{{ __('success') }}</span>`
                            } else if (data === 2) {
                                return `<span class="badge bg-danger">{{ __('reject') }}</span>`
                            } else if (data === 3) {
                                return `<span class="badge bg-warning">{{ __('Waiting for processing') }}</span>`
                            } else if (data === 4) {
                                return `<span class="badge bg-success">{{ __('processed') }}</span>`
                            } else if (data === 5) {
                                return `<span class="badge bg-primary">{{ __('processing') }}</span>`
                            } else if (data === 6) {
                                return `<span class="badge bg-primary">{{ __('Validating') }}</span>`
                            } else if (data === 7) {
                                return `<span class="badge bg-primary">{{ __('Start processing') }}</span>`
                            } else if (data === 8) {
                                return `<span class="badge bg-warning">{{ __('Check again') }}</span>`
                            }
                        },
                        className: 'text-center',

                    },
                    {
                        data: 'is_approved',
                        render: (data) => {
                            if (data === 0) {
                                return `<span class="badge bg-warning">{{ __('Waiting for approval') }}</span>`
                            } else {
                                return `<span class="badge bg-success">{{ __('Approved') }}</span>`
                            }
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'fee',
                        render: function(data, type, row) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'balance',
                        render: (data) => {
                            if (data === 0) {
                                return '__';
                            }
                            return '<span class="badge bg-danger">-' + numberFormat(data) +
                                '</span>';
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'created_at',
                        className: 'text-center',
                    },
                    {
                        data: 'processing_time',
                        className: 'text-center',
                        orderable: true,
                        searchable: false,
                        visible: userRole
                    },
                    {
                        data: 'is_callback',
                        render: function(data, type, row) {
                            if (data == 1) {
                                return `<span class="badge bg-primary">{{ __('Calledback') }}</span>`;
                            } else {
                                return `<span class="badge bg-secondary">{{ __('No callback yet') }}</span>`;
                            }
                        },
                        className: 'text-center',
                        visible: userRole
                    },
                    {
                        data: 'error_message',
                        className: 'collapse-column',
                        visible: userRole
                    },
                    {
                        data: 'gate',
                        visible: userRole
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        visible: userRole ? true : false
                    }
                ],
                order: [
                    [10, 'desc']
                ],
                select: {
                    'style': 'multi'
                },
                rowCallback: function(row, data) {}
            });

            $('#listCashouts').on('draw.dt', function() {
                $('input[name="cashoutCheckbox"]').each(function() {
                    this.checked = false;
                });
                $('input[name="main_checkbox"]').prop('checked', false);
                $('button#approveAllBtn').addClass('d-none');
                $('button#cancelAllBtn').addClass('d-none');
                $('button#completeAllBtn').addClass('d-none');
                toggleSelectGateBtn();
            });

            $(document).on('click', '#selectGatePaymentBtn', function() {
                const ids = getSelectedCashoutIds();
                if (!ids.length) return;

                // lưu danh sách ids vào modal (JSON string)
                $('#selectGatewayModal').attr('data-cashout-ids', JSON.stringify(ids));

                // show modal
                $('#selectGatewayModal').modal('show');
            });

            $(document).on('click', 'input[name="main_checkbox"]', function() {
                if (this.checked) {
                    $('input[name="cashoutCheckbox"]').each(function() {
                        this.checked = true;
                    });
                } else {
                    $('input[name="cashoutCheckbox"]').each(function() {
                        this.checked = false;
                    });
                }
                approveAllBtn();
                cancelAllBtn();
                completeAllBtn();
                toggleSelectGateBtn();
            });

            function getSelectedCashoutIds() {
                const ids = [];
                $('input[name="cashoutCheckbox"]:checked').each(function() {
                    ids.push($(this).data('id'));
                });
                return ids;
            }

            function toggleSelectGateBtn() {
                const ids = getSelectedCashoutIds();
                const $btn = $('button#selectGatePaymentBtn');

                if (ids.length > 0) {
                    $btn
                        .removeClass('d-none')
                        .html(`<i class="fa-solid fa-random me-1"></i> ${ {{ \Illuminate\Support\Js::from(__('Chọn cổng thanh toán')) }} } (${ids.length})`);
                } else {
                    $btn.addClass('d-none');
                }
            }

            document.querySelectorAll('label.toggle-vis').forEach((el) => {
                el.addEventListener('click', function(e) {

                    let columnIdx = el.getAttribute('data-column');
                    let column = dataTable.column(columnIdx);

                    let checkbox = el.querySelector('input[type="checkbox"]');

                    column.visible(checkbox.checked);
                });
            });
            document.querySelectorAll('.dropdown-item.toggle-vis').forEach((item) => {
                item.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            });

            $(document).on('click', '.cashout-content', function() {
                const content = $(this).data('cashout-content');
                $('#error_message').val(content);
            });

            $(document).on('change', 'input[name="cashoutCheckbox"]', function() {
                if ($('input[name="cashoutCheckbox"]').length == $(
                        'input[name="cashoutCheckbox"]:checked').length) {
                    $('input[name="main_checkbox"]').prop('checked', true);
                } else {
                    $('input[name="main_checkbox"]').prop('checked', false);
                }
                approveAllBtn();
                cancelAllBtn();
                completeAllBtn();
                toggleSelectGateBtn();
            });

            function approveAllBtn() {
                if ($('input[name="cashoutCheckbox"]:checked').length > 0) {
                    $('button#approveAllBtn').text({{ \Illuminate\Support\Js::from(__('Duyệt đơn')) }} + ' (' + $('input[name="cashoutCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#approveAllBtn').addClass('d-none');
                }
            }

            function cancelAllBtn() {
                if ($('input[name="cashoutCheckbox"]:checked').length > 0) {
                    $('button#cancelAllBtn').html('<i class="fa-solid fa-xmark me-1"></i>' + {{ \Illuminate\Support\Js::from(__('Hủy đơn')) }} + ' (' + $(
                        'input[name="cashoutCheckbox"]:checked').length + ')').removeClass('d-none');

                } else {
                    $('button#cancelAllBtn').addClass('d-none');
                }
            }

            // Số đơn gửi mỗi lượt. Phải khớp COMPLETE_ALL_CHUNK bên controller;
            // server từ chối lô lớn hơn.
            const COMPLETE_CHUNK = 25;

            function completeAllBtn() {
                const n = $('input[name="cashoutCheckbox"]:checked').length;

                if (n > 0) {
                    $('button#completeAllBtn')
                        .html('<i class="fa-solid fa-bolt-lightning me-1"></i>' + {{ \Illuminate\Support\Js::from(__('Hoàn thành đơn')) }} + ' (' + n + ')')
                        .removeClass('d-none');
                } else {
                    $('button#completeAllBtn').addClass('d-none');
                }
            }

            $(document).on('click', 'button#completeAllBtn', function() {
                const dataTable = $('#listCashouts').DataTable();
                const pageInfo = dataTable.page.info();
                const ids = getSelectedCashoutIds();

                if (!ids.length) {
                    return;
                }

                Swal.fire({
                    title: {{ \Illuminate\Support\Js::from(__('Hoàn thành đơn?')) }},
                    html: {{ \Illuminate\Support\Js::from(__('Hoàn thành <b>:n</b> đơn đang chọn và callback về đối tác?')) }}.replace(':n', ids.length) +
                        '<br><small class="text-muted">' + {{ \Illuminate\Support\Js::from(__('Đơn đã huỷ, đã hoàn tiền, đã callback hoặc đang bị khoá sẽ được bỏ qua và liệt kê lại.')) }} +
                        '</small>',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý')) }},
                    cancelButtonText: {{ \Illuminate\Support\Js::from(__('Huỷ')) }},
                    confirmButtonColor: '#556ee6',
                    cancelButtonColor: '#d33',
                    allowOutsideClick: false,
                }).then(async function(result) {
                    if (!result.isConfirmed) {
                        return;
                    }

                    // Chia nhỏ rồi gửi lần lượt thay vì dồn cả lô vào một request.
                    // Gửi 150 đơn một lần sẽ giữ một thread Apache hàng chục giây
                    // (chính là nguồn của lỗi 522), và người dùng chỉ thấy màn hình
                    // đứng im không biết chạy tới đâu.
                    const csrfToken = '{{ csrf_token() }}';
                    let done = 0;
                    let skipped = [];
                    let stopped = false;

                    Swal.fire({
                        title: {{ \Illuminate\Support\Js::from(__('Đang xử lý...')) }},
                        html: {{ \Illuminate\Support\Js::from(__('<b>:done</b>/:total đơn')) }}.replace(':done', 0).replace(':total', ids.length),
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: function() {
                            Swal.showLoading();
                        }
                    });

                    for (let i = 0; i < ids.length; i += COMPLETE_CHUNK) {
                        const chunk = ids.slice(i, i + COMPLETE_CHUNK);

                        try {
                            const res = await $.ajax({
                                url: "{{ route('app.cashout.completeAll') }}",
                                type: 'PUT',
                                data: {
                                    ids: chunk,
                                    _token: csrfToken
                                },
                                dataType: 'json',
                            });

                            if (res.code != 1) {
                                skipped.push({ id: '-', reason: res.msg || {{ \Illuminate\Support\Js::from(__('Máy chủ từ chối lô này')) }} });
                                stopped = true;
                                break;
                            }

                            done += res.done || 0;
                            skipped = skipped.concat(res.skipped || []);
                        } catch (e) {
                            // Dừng hẳn chứ không chạy tiếp: mất kết nối giữa chừng thì
                            // các lô sau nhiều khả năng cũng hỏng, mà mỗi lô lỗi lại là
                            // một lần chờ timeout.
                            skipped.push({
                                id: '-',
                                reason: {{ \Illuminate\Support\Js::from(__('Mất kết nối. Các đơn còn lại CHƯA được xử lý.')) }}
                            });
                            stopped = true;
                            break;
                        }

                        Swal.update({
                            html: {{ \Illuminate\Support\Js::from(__('<b>:done</b>/:total đơn')) }}.replace(':done', Math.min(i + COMPLETE_CHUNK, ids.length))
                                .replace(':total', ids.length)
                        });
                    }

                    dataTable.page(pageInfo.page).draw('page');

                    let html = {{ \Illuminate\Support\Js::from(__('Đã hoàn thành và gửi callback: <b>:n</b> đơn.')) }}.replace(':n', done);

                    if (skipped.length) {
                        const rows = skipped.slice(0, 10).map(function(s) {
                            return '<li>' + s.id + ' — ' + s.reason + '</li>';
                        }).join('');

                        html += '<br>' + {{ \Illuminate\Support\Js::from(__('Bỏ qua <b>:n</b> đơn:')) }}.replace(':n', skipped.length) +
                            '<ul style="text-align:left;max-height:200px;overflow:auto">' + rows + '</ul>';

                        if (skipped.length > 10) {
                            html += '<small>' + {{ \Illuminate\Support\Js::from(__('... và :n đơn nữa')) }}.replace(':n', skipped.length - 10) + '</small>';
                        }
                    }

                    Swal.fire({
                        title: stopped ? {{ \Illuminate\Support\Js::from(__('Dừng giữa chừng')) }} : {{ \Illuminate\Support\Js::from(__('Xong')) }},
                        html: html,
                        icon: stopped ? 'error' : (skipped.length ? 'warning' : 'success'),
                    });
                });
            });

            $(document).on('click', 'button#approveAllBtn', function() {
                var dataTable = $('#listCashouts').DataTable();
                var pageInfo = dataTable.page.info();
                var checkedCashouts = [];
                $('input[name="cashoutCheckbox"]:checked').each(function() {
                    checkedCashouts.push($(this).data('id'));
                });

                if (checkedCashouts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: {{ \Illuminate\Support\Js::from(__('Xác nhận duyệt đơn?')) }},
                        html: {{ \Illuminate\Support\Js::from(__('Bạn có chắc muốn duyệt <b>(:n)</b> đơn cashout này không?')) }}
                            .replace(':n', checkedCashouts.length),
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý, Duyệt')) }},
                        cancelButtonText: {{ \Illuminate\Support\Js::from(__('Huỷ')) }},
                        confirmButtonColor: '#556ee6',
                        cancelButtonColor: '#d33',
                        allowOutsideClick: false,
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: "{{ route('app.cashout.approvedAll') }}",
                                type: 'PUT',
                                data: {
                                    ids: checkedCashouts,
                                    _token: csrfToken
                                },
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code == 1) {
                                        dataTable.page(pageInfo.page).draw('page');
                                        toastr.success(data.msg);
                                    } else {
                                        dataTable.page(pageInfo.page).draw('page');
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                                }
                            });
                        }
                    })
                }
            });

            $(document).on('click', 'button#cancelAllBtn', function() {
                var dataTable = $('#listCashouts').DataTable();
                var pageInfo = dataTable.page.info();
                var checkedCashouts = [];
                $('input[name="cashoutCheckbox"]:checked').each(function() {
                    checkedCashouts.push($(this).data('id'));
                });

                if (checkedCashouts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: {{ \Illuminate\Support\Js::from(__('Xác nhận hủy đơn?')) }},
                        html: {{ \Illuminate\Support\Js::from(__('Bạn có chắc muốn hủy <b>(:n)</b> đơn cashout này không?')) }}
                            .replace(':n', checkedCashouts.length),
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý, Duyệt')) }},
                        cancelButtonText: {{ \Illuminate\Support\Js::from(__('Huỷ')) }},
                        confirmButtonColor: '#556ee6',
                        cancelButtonColor: '#d33',
                        allowOutsideClick: false,
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: "{{ route('app.cashout.cancelAll') }}",
                                type: 'PUT',
                                data: {
                                    ids: checkedCashouts,
                                    _token: csrfToken
                                },
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code == 1) {
                                        dataTable.page(pageInfo.page).draw('page');
                                        toastr.success(data.msg);
                                    } else {
                                        dataTable.page(pageInfo.page).draw('page');
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                                }
                            });
                        }
                    })
                }
            });

            $(document).on('click', '#btn-search', function(event) {
                event.preventDefault();

                const fromCreate = $('#from_create_date').val();
                const toCreate = $('#to_create_date').val();

                const fromDone = $('#from_complete_date').val();
                const toDone = $('#to_complete_date').val();

                // Create: bạn đang giới hạn 31 ngày
                const vCreate = validateRange(fromCreate, toCreate, 31);
                if (!vCreate.ok) {
                    $('#date-error').text(vCreate.msg);
                    return;
                }

                // Complete: nếu người dùng nhập thì cũng giới hạn 31 ngày
                const vDone = validateRange(fromDone, toDone, 31);
                if (!vDone.ok) {
                    $('#date-error').text(vDone.msg);
                    return;
                }

                $('#date-error').text('');
                dataTable.ajax.reload();
            });

            $(document).ready(function() {
                $(document).on("click", ".select-gateway-btn", function() {
                    const cashoutId = $(this).data("cashout-id");
                    $('#selectGatewayModal').attr('data-cashout-ids', JSON.stringify([cashoutId]));
                    $('#selectGatewayModal').modal('show');
                });

                $(document).on("click", ".gateway-btn", async function() {
                    const dataTable = $('#listCashouts').DataTable();
                    const pageInfo = dataTable.page.info();

                    let idsRaw = $("#selectGatewayModal").attr("data-cashout-ids");
                    let cashoutIds = [];
                    try {
                        cashoutIds = JSON.parse(idsRaw || "[]");
                    } catch (e) {}

                    const gatewayId = $(this).data("gateway-id");
                    const gatewayName = ($(this).data("gateway-name") || '').toString().trim();
                    const csrfToken = '{{ csrf_token() }}';
                    if (!cashoutIds.length) {
                        const singleId = $("#selectGatewayModal").attr("data-cashout-id");
                        if (singleId) cashoutIds = [singleId];
                    }
                    if (!gatewayId) return;

                    const ok = await swal.fire({
                        title: {{ \Illuminate\Support\Js::from(__('Đổi cổng sang :name?')) }}.replace(':name', gatewayName),
                        html: {{ \Illuminate\Support\Js::from(__('Áp dụng cho <b>:n</b> đơn.')) }}.replace(':n', cashoutIds.length),
                        showCancelButton: true,
                        icon: "question",
                        confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý')) }},
                        cancelButtonText: {{ \Illuminate\Support\Js::from(__('Huỷ')) }},
                        allowOutsideClick: false,
                    });

                    if (!ok.value) return;

                    let successCount = 0,
                        failCount = 0;

                    // chạy tuần tự để tránh spam server (bạn có thể chạy Promise.all nhưng dễ quá tải)
                    for (const cashoutId of cashoutIds) {
                        try {
                            const res = await $.ajax({
                                url: "{{ route('app.cashout.changeGateway') }}",
                                type: "PUT",
                                dataType: "json",
                                data: {
                                    cashoutId,
                                    gatewayId,
                                    _token: csrfToken
                                }
                            });
                            if (res.code == 1 || res.success) successCount++;
                            else failCount++;
                        } catch (e) {
                            failCount++;
                        }
                    }

                    $('#selectGatewayModal').modal('hide');
                    dataTable.page(pageInfo.page).draw('page');

                    if (failCount === 0) toastr.success(
                        {{ \Illuminate\Support\Js::from(__('Đổi cổng thành công :success/:total đơn')) }}.replace(':success', successCount).replace(':total', cashoutIds.length));
                    else toastr.warning({{ \Illuminate\Support\Js::from(__('Kết quả: :success OK, :fail fail')) }}.replace(':success', successCount).replace(':fail', failCount));
                });
            });

            $('#listCashouts tbody').on('click', 'td.collapse-column', function() {
                var cell = $(this);
                if (cell.data('expanded')) {
                    cell.css('max-width', 'none');
                    cell.removeClass('expanded');
                    cell.data('expanded', false);
                } else {
                    cell.css('max-width', '');
                    cell.addClass('expanded');
                    cell.data('expanded', true);
                }
            });

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

            $(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')) {
                        $('#transactionDataTable').DataTable().destroy();
                    }
                    $('#transactionDataTable').DataTable().clear().draw();
                    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({{ \Illuminate\Support\Js::from(__('Thất bại')) }}, {{ \Illuminate\Support\Js::from(__('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>' + {{ \Illuminate\Support\Js::from(__('Mã giao dịch')) }} + '</th><th>' + {{ \Illuminate\Support\Js::from(__('Số tiền')) }} + '</th><th>' + {{ \Illuminate\Support\Js::from(__('Loại giao dịch')) }} + '</th><th>' + {{ \Illuminate\Support\Js::from(__('Phí')) }} + '</th><th>' + {{ \Illuminate\Support\Js::from(__('Nội dung')) }} + '</th><th>' + {{ \Illuminate\Support\Js::from(__('Thời gian')) }} + '</th><th>' + {{ \Illuminate\Support\Js::from(__('Trạng thái')) }} + '</th><th>CashIn</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">' + {{ \Illuminate\Support\Js::from(__('Nhận tiền')) }} + '</span>' :
                                            '<span class="badge bg-secondary">' + {{ \Illuminate\Support\Js::from(__('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">' + {{ \Illuminate\Support\Js::from(__('Lỗi')) }} + '</span>' :
                                            '<span class="badge bg-success">' + {{ \Illuminate\Support\Js::from(__('Thành công')) }} + '</span>'
                                        ) +
                                        '</td>';
                                    content += '<td>' + (transaction['isset'] === true ?
                                            `<span class="badge bg-info">Oke</span>` :
                                            `<span class="badge bg-danger">Wait</span>`) +
                                        '</td>'
                                    content += '</tr>';
                                }
                                content += '</tbody>';
                                content += '</table>';
                                document.getElementById('transactionHistoryContent').innerHTML =
                                    content;
                                $('#transactionHistoryModal').modal('show');
                                hideLoadingOverlay();
                                var transactionDataTable = $('#transactionDataTable')
                                    .DataTable({
                                        pageLength: limit,
                                        aLengthMenu: [
                                            [limit],
                                            [limit]
                                        ],
                                        order: [
                                            [5, 'desc']
                                        ],
                                    });
                            } else {
                                hideLoadingOverlay();
                                toastr.error(data.message);
                            }
                        },
                        error: function() {
                            hideLoadingOverlay();
                            toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi khi lấy dữ liệu lịch sử giao dịch.')) }});
                        }
                    });
                }
            });

            $(document).on('click', 'button#setupBankMaintenance', function() {
                $.ajax({
                    url: '/get-bankout-maintenance-data',
                    method: 'GET',
                    success: function(response) {

                    },
                    error: function(error) {
                        console.error('Lỗi lấy thông tin bank out bảo trì:', error);
                        toastr.error(error);
                    }
                });
            });

            function refreshData() {
                dataTable.ajax.reload();
            }

            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("{{ __('Auto refresh: Off') }}");
                } else {
                    $(this).data('auto-refresh', true);
                    $(this).find('#refresh-text').text("{{ __('Auto refresh: On') }}");
                    autoRefreshInterval = setInterval(refreshData, 5000);
                }
            });

            $('#btn-total-cashout').click(function(e) {
                e.preventDefault();

                $('#loading-overlay').removeClass('d-none');

                var partner = $('#search-cashout [name="partner"]').val();
                var from_create_date = $('#search-cashout [name="from_create_date"]').val();
                var to_create_date = $('#search-cashout [name="to_create_date"]').val();
                var from_complete_date = $('#search-cashout [name="from_complete_date"]').val();
                var to_complete_date = $('#search-cashout [name="to_complete_date"]').val();
                var amount_from = $('#search-cashout [name="amount_from"]').val();
                var amount_to = $('#search-cashout [name="amount_to"]').val();
                var account_sender = $('#search-cashout [name="account_sender"]').val();
                var status = $('#search-cashout [name="status"]').val();
                var request_id = $('#search-cashout [name="request_id"]').val();
                var handler = $('#search-cashout [name="handler"]').val();
                var gate = $('#search-cashout [name="gate"]').val();

                const vCreate = validateRange($('#from_create_date').val(), $('#to_create_date').val(), 15);
                if (!vCreate.ok) {
                    $('#date-error').text(vCreate.msg);
                    $('#loading-overlay').addClass('d-none');
                    return;
                }

                const vDone = validateRange($('#from_complete_date').val(), $('#to_complete_date').val(),
                    15);
                if (!vDone.ok) {
                    $('#date-error').text(vDone.msg);
                    $('#loading-overlay').addClass('d-none');
                    return;
                }

                $('#date-error').text('');
                $.ajax({
                    url: '{{ route('app.cashout.reportTotalCashout') }}',
                    type: 'GET',
                    data: {
                        from_create_date: from_create_date,
                        to_create_date: to_create_date,
                        from_complete_date: from_complete_date,
                        to_complete_date: to_complete_date,
                        partner: partner,
                        amount_from: amount_from,
                        amount_to: amount_to,
                        account_sender: account_sender,
                        status: status,
                        request_id: request_id,
                        handler: handler,
                        gate: gate
                    },
                    success: function(response) {
                        $('#loading-overlay').addClass('d-none');

                        $('#totalRealAmountTransfer').text(numberFormat(response
                            .totalRealAmountTransfer));
                        $('#totalAmountProcessed').text(numberFormat(response
                            .totalAmountProcessed));
                        $('#totalTransactions').text(numberFormat(response.totalTransactions));
                        $('#totalSuccessTransactions').text(numberFormat(response
                            .totalSuccessTransactions));
                        $('#successTransactionPercentage').text(numberFormat(response
                            .successTransactionPercentage));
                        $('#cashoutTotalModal').modal('show');
                    },
                    error: function() {
                        $('#loading-overlay').addClass('d-none');
                        toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi khi lấy dữ liệu tổng Cashout.')) }});
                    }
                });
            });

            $(document).on('click', '.transfer-money-cashout', function() {
                var cashoutInfo = $(this).data('cashout-info');
                $('#cash-out-id').val(cashoutInfo.cash_out_id);
                var bankCode = cashoutInfo.bank_code;
                var bankName = cashoutInfo.bank_name;
                var amount = cashoutInfo.amount;
                $('#cashout-modal').data('amount', amount);
                $('#bank').val('[' + bankCode + '] ' + bankName);
                $('#bank-account').val(cashoutInfo.bank_account);
                $('#customer-name').val(cashoutInfo.customer_name);
                $('#amount').val(amount);
                $('#content').val(cashoutInfo.content);

                $('#cashout-modal').modal('show');
            });

            $('#cashout-modal').on('shown.bs.modal', function() {
                var amount = $('#amount').val();
                $('#bank_account_transfer').find('option').remove().end().append(
                    '<option value="">' + {{ \Illuminate\Support\Js::from(__('--Chọn tài khoản chuyển--')) }} + '</option>');
                $.ajax({
                    url: "{{ route('app.cashout.getBankAccountsCashOut') }}",
                    dataType: 'JSON',
                    type: 'POST',
                    data: {
                        amount: amount,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            response.data.map(function(value) {
                                $('#bank_account_transfer').append($('<option>').val(
                                    value.id).html(
                                    `[${value.display_name}] - (${value.acc_name}) - ${value.acc_no}: ${numberFormat(value.balance)} VNĐ`
                                ));
                            });
                        } else {
                            toastr.error(response.message);
                        }
                    }
                });
            });

            $('#bank_account_transfer').on('change', function() {
                $('#auth-method').find('option').remove().end();
                $.ajax({
                    url: "{{ route('app.cashout.getAuthMethod') }}",
                    dataType: 'JSON',
                    type: 'POST',
                    data: {
                        bank_account_id: $(this).val(),
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            response.data.map(function(value) {
                                $('#auth-method').append($('<option>').val(value.value)
                                    .html(value.text))
                            });
                        } else {
                            toastr.error(response.message);
                        }
                    }
                });
            });

            $('#transfer-money-cashout-form').submit(function(e) {
                e.preventDefault();
                var bank_account_id = $('#bank_account_transfer').val();
                var cash_out_id = $('#cash-out-id').val();
                var auth_method = $('#auth-method').val();
                var otp = $('#otp').val();
                var data = $('#cashout-modal').data('data');
                $('#btn-submit').prop('disabled', true);
                $.ajax({
                    url: "{{ route('app.cashout.transfer') }}",
                    dataType: 'JSON',
                    type: 'POST',
                    contentType: "application/json",
                    data: JSON.stringify({
                        _token: "{{ csrf_token() }}",
                        cash_out_id,
                        auth_method,
                        bank_account_id,
                        otp,
                        data
                    }),
                    success: function(response) {
                        if (response.success) {
                            if (response.otp) {
                                $('#cashout-modal').data('data', response.data);
                                $('#content-alert').removeClass('d-none');
                                $('#content-text').html(response.message);
                                toastr.info(response.message);
                            } else {
                                toastr.success(response.message);
                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000);
                            }
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    complete: () => {
                        $('#btn-submit').prop('disabled', false);
                    }
                });
            });

            $(document).on('click', '.showBillTransactionSuccess', function() {
                showLoadingOverlay();
                $('#show-bill-here').find('img').remove();
                var cashoutID = $(this).data('cashout-id');
                $('.bill-transaction-view').remove();
                $.ajax({
                    url: 'cashout/get-bill/' + cashoutID,
                    type: 'GET',
                    success: function(data) {
                        if (data.success) {
                            var img = $('<img>').attr('src', 'data:image/png;base64,' + data
                                .image);
                            $('#show-bill-here').append(img);
                            $('#showBillTransactionSuccessModal').modal('show');
                            hideLoadingOverlay();
                        } else {
                            hideLoadingOverlay();
                            toastr.error(data.message);
                        }
                    },
                    error: function() {
                        hideLoadingOverlay();
                        toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi khi lấy bill giao dịch.')) }});
                    }
                });
            });
        });

        $(document).on('click', '#refund-btn', function() {
            var cashoutId = $(this).data('cashout-id');
            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();
            Swal.fire({
                title: {{ \Illuminate\Support\Js::from(__('Xác nhận hoàn tiền và callback?')) }},
                html: {{ \Illuminate\Support\Js::from(__('Bạn có chắc chắn muốn hoàn tiền và callback đơn hàng này không?')) }},
                icon: "question",
                showCancelButton: true,
                confirmButtonText: "{{ __('Agree') }}",
                cancelButtonText: "{{ __('Cancel') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/cashout/' + cashoutId + '/refund',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                        },
                        success: function(data) {
                            if (data.code == 1) {
                                dataTable.page(pageInfo.page).draw('page');
                                toastr.success(data.msg);
                            } else {
                                toastr.error(data.msg);
                            }
                        },
                        error: function(xhr, status, error) {
                            toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                        }
                    });
                }
            });
        });

        function recallbackCashout(button) {
            var formAction = $(button).data('action-callback');
            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();
            $.ajax({
                url: formAction,
                type: 'POST',
                data: $('#recallbackForm').serialize(),
                success: function(data) {
                    if (data.code == 1) {
                        dataTable.page(pageInfo.page).draw('page');
                        toastr.success(data.msg);
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                }
            });
        }

        function blockCashout(button) {
            var formAction = $(button).data('action-block-cashout');
            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();
            $.ajax({
                url: formAction,
                type: 'POST',
                data: $('#blockCashoutForm').serialize(),
                success: function(data) {
                    if (data.code == 1) {
                        dataTable.page(pageInfo.page).draw('page');
                        toastr.success(data.msg);
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                }
            });
        }

        $(document).on('click', '.remove-gate-btn', function() {
            var $btn = $(this);
            var cashoutId = $btn.data('cashout-id');
            var gateName = $btn.data('gate');
            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();

            Swal.fire({
                title: {{ \Illuminate\Support\Js::from(__('Bỏ cổng ":name"?')) }}.replace(':name', gateName),
                html: {{ \Illuminate\Support\Js::from(__('Đơn sẽ về trạng thái chưa có cổng. Chỉ làm khi chắc chắn cổng ":name" chưa xử lý đơn (tránh đẩy trùng nếu đẩy sang cổng khác). Sau đó bạn có thể chọn cổng khác để đẩy hoặc hủy đơn.')) }}
                    .replace(':name', gateName),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: {{ \Illuminate\Support\Js::from(__('Bỏ cổng')) }},
                cancelButtonText: {{ \Illuminate\Support\Js::from(__('Huỷ')) }},
                confirmButtonColor: '#d33',
            }).then(function(result) {
                if (!result.isConfirmed) return;

                $btn.prop('disabled', true);
                $.ajax({
                    url: '/cashout/' + cashoutId + '/remove-gate',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(data) {
                        if (data.code == 1) {
                            dataTable.page(pageInfo.page).draw('page');
                            toastr.success(data.msg);
                        } else {
                            toastr.error(data.msg);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                    },
                    complete: function() {
                        $btn.prop('disabled', false);
                    }
                });
            });
        });

        $(document).on('click', '#rehandle-btn', function() {
            var cashoutId = $(this).data('cashout-id');
            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();
            Swal.fire({
                title: "{{ __('Confirm rerun of this application?') }}",
                html: "{{ __('Are you sure you want to process this application again?') }}",
                icon: "question",
                showCancelButton: true,
                confirmButtonText: "{{ __('Agree') }}",
                cancelButtonText: "{{ __('Cancel') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/cashout/' + cashoutId + '/rehandle',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                        },
                        success: function(data) {
                            if (data.code == 1) {
                                dataTable.page(pageInfo.page).draw('page');
                                toastr.success(data.msg);
                            } else {
                                toastr.error(data.msg);
                            }
                        },
                        error: function(xhr, status, error) {
                            toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                        }
                    });
                }
            });
        });
        $(document).on('click', '#success-flash-btn, #success-flash-modal-btn', function() {
            var cashoutId = $(this).data('cashout-id');
            var action = $(this).data('acticon');
            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();
            Swal.fire({
                title: "{{ __('Hoàn thành đơn?') }}",
                html: "{{ __('Bạn có chắc chắn hoàn thành đơn không?') }}",
                icon: "question",
                showCancelButton: true,
                confirmButtonText: "{{ __('Agree') }}",
                cancelButtonText: "{{ __('Cancel') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/cashout/' + cashoutId + '/success-flash',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            action: action
                        },
                        success: function(data) {
                            if (data.code == 1) {
                                $('#qr-code-modal').modal('hide');
                                dataTable.page(pageInfo.page).draw('page');
                                toastr.success(data.msg);
                            } else {
                                toastr.error(data.msg);
                            }
                        },
                        error: function(xhr, status, error) {
                            toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                        }
                    });
                }
            });
        });



        $(document).on('click', '.approveCashoutButton', function() {
            var $form = $(this).closest('form');
            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();

            $.ajax({
                url: $form.attr('action'),
                type: 'PUT',
                data: $form.serialize(),
                success: function(data) {
                    if (data.code == 1) {
                        dataTable.page(pageInfo.page).draw('page');
                        toastr.success(data.msg);
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                }
            });
        });

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

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

        function numberFormat(number) {
            return new Intl.NumberFormat('vi-VN').format(number);
        }

        function formatTimestamp(timestamp) {
            const date = new Date(timestamp);

            const day = ('0' + date.getDate()).slice(-2);
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const year = date.getFullYear();
            const hours = ('0' + date.getHours()).slice(-2);
            const minutes = ('0' + date.getMinutes()).slice(-2);

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

        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 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}`;
        }
    </script>

    <script>
        $(document).on('click', '#edit-cashout', function() {
            const cashoutId = $(this).data('cashout-id');

            $.ajax({
                url: '/get-cashout-data/' + cashoutId,
                method: 'GET',
                success: function(response) {
                    $('#cashout_id').val(response.cashout.cash_out_id);
                    $('#request_id').val(response.cashout.request_id);
                    $('#partner').val(response.partner);
                    $('#balance').val(numberFormat(response.cashout.balance));
                    $('#fee').val(response.cashout.fee);
                    $('#error_message').val(response.cashout.error_message);
                    $('#status').val(response.cashout.status);
                    $('#disabled_status').val(response.cashout.status);
                    $('#is_approved').val(response.cashout.is_approved);

                    if (response.cashout.status === 4) {
                        $('#status').prop('disabled', true);
                    } else {
                        $('#status').prop('disabled', false);
                    }
                    switch (response.cashout.status) {
                        case 0:
                            $('#error').prop('selected', true);
                            break;
                        case 3:
                            $('#pending').prop('selected', true);
                            break;
                        case 5:
                            $('#processing').prop('selected', true);
                            break;
                        case 6:
                            $('#validate').prop('selected', true);
                            break;
                        case 7:
                            $('#start_handling').prop('selected', true);
                            break;
                        case 8:
                            $('#check').prop('selected', true);
                            break;
                        default:
                            break;
                    }

                    if (response.cashout.is_approved === 0) {
                        $('#wait_approve').prop('selected', true);
                    } else if (response.cashout.is_approved === 1) {
                        $('#approved').prop('selected', true);
                    }
                },
                error: function(error) {
                    console.error('Lỗi lấy thông tin cashout:', error);
                    toastr.error(error);
                }
            });
        });

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

        function saveData() {
            var status = document.getElementById('status').value;
            var disabled_status = document.getElementById('disabled_status').value;
            var cashout_id = document.getElementById('cashout_id').value;
            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();
            if ((status == 0 && disabled_status == 0) || (disabled_status != 0 && status != 0)) {
                $.ajax({
                    url: '/cashout/' + cashout_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({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                    }
                });
            } else if (status == 0 && disabled_status != 0) {
                Swal.fire({
                    title: "{{ __('Order cancellation confirmation?') }}",
                    html: "{{ __('Are you sure you want to cancel this order?') }}",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: "{{ __('Agree') }}",
                    cancelButtonText: "{{ __('Cancel') }}"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '/cashout/' + cashout_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({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                            }
                        });
                    }
                });
            } else if (status == 4 && disabled_status == 0) {
                Swal.fire({
                    title: "{{ __('Confirmed order processing?') }}",
                    html: "{{ __('Are you sure you want to confirm your order successfully?') }}",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý')) }},
                    cancelButtonText: {{ \Illuminate\Support\Js::from(__('Hủy')) }}
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '/cashout/' + cashout_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({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                            }
                        });
                    }
                });
            } else {
                toastr.error({{ \Illuminate\Support\Js::from(__('Không thể cập nhật đơn hàng với thông tin như vậy!')) }});
            }
        }


        $(document).on('click', '#offcanvasRightCreateCashoutButton', function(e) {
            $('#formCreateCashout')[0].reset();
            $('#formCreateCashout').find('.is-invalid').removeClass('is-invalid');
            $('#formCreateCashout').find('.text-danger').remove();
        });

        $(document).on('click', '#createCashout', function(e) {

            e.preventDefault();

            $('#createCashout').prop('disabled', true);
            $('#spinner-create-cashout').show();
            $('#button-text-create-cashout').text({{ \Illuminate\Support\Js::from(__('Đang tạo đơn cashout...')) }});

            var dataTable = $('#listCashouts').DataTable();
            var pageInfo = dataTable.page.info();

            $.ajax({
                url: '/create-cashout-manual-for-partner',
                type: 'POST',
                data: $('#formCreateCashout').serialize(),
                success: function(response) {
                    if (response.success == true) {
                        $('#spinner-create-cashout').hide();
                        $('#button-text-create-cashout').text({{ \Illuminate\Support\Js::from(__('Tạo CashOut')) }});
                        $('#offcanvasRightCreateCashout').offcanvas('hide');
                        $('#createCashout').prop('disabled', false);
                        dataTable.page(pageInfo.page).draw('page');
                        toastr.success(response.message);
                    } else {
                        $('#spinner-create-cashout').hide();
                        $('#button-text-create-cashout').text({{ \Illuminate\Support\Js::from(__('Tạo CashOut')) }});
                        $('#createCashout').prop('disabled', false);
                        $('#offcanvasRightCreateCashout').offcanvas('hide');
                        dataTable.page(pageInfo.page).draw('page');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Có lỗi xảy ra:', error);
                    $('#spinner-create-cashout').hide();
                    $('#button-text').text({{ \Illuminate\Support\Js::from(__('Tạo cashout')) }});
                    $('#createCashout').prop('disabled', false);
                    toastr.error({{ \Illuminate\Support\Js::from(__('Có lỗi xảy ra')) }});
                }
            });
        });

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modalEl = document.getElementById('processingStatsModal');
            if (!modalEl) return;

            modalEl.addEventListener('show.bs.modal', function() {
                loadProcessingStats();
            });

            function loadProcessingStats() {
                const loadingEl = document.getElementById('processing-stats-loading');
                const contentEl = document.getElementById('processing-stats-content');

                loadingEl.classList.remove('d-none');
                contentEl.style.opacity = '0.5';

                const from_create_date = $('#search-cashout [name="from_create_date"]').val();
                const to_create_date = $('#search-cashout [name="to_create_date"]').val();
                const from_complete_date = $('#search-cashout [name="from_complete_date"]').val();
                const to_complete_date = $('#search-cashout [name="to_complete_date"]').val();
                const gate = $('#search-cashout [name="gate"]').val();

                const params = new URLSearchParams();

                if (from_create_date) params.append('from_create_date', from_create_date);
                if (to_create_date) params.append('to_create_date', to_create_date);
                if (from_complete_date) params.append('from_complete_date', from_complete_date);
                if (to_complete_date) params.append('to_complete_date', to_complete_date);
                if (gate) params.append('gate', gate);

                fetch(`{{ route('app.cashout.processingTimeStats') }}?${params.toString()}`, {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(async (response) => {
                        const data = await response.json();
                        if (!response.ok) {
                            throw new Error(data.message || {{ \Illuminate\Support\Js::from(__('Không thể tải thống kê')) }});
                        }
                        return data;
                    })
                    .then((res) => {
                        const stats = res.data || {};

                        const total = Number(stats.total_success || 0);
                        const lt1 = Number(stats.lt_1m || 0);
                        const m1_3 = Number(stats.from_1_to_3m || 0);
                        const m3_5 = Number(stats.from_3_to_5m || 0);
                        const m5_10 = Number(stats.from_5_to_10m || 0);
                        const gt10 = Number(stats.gt_10m || 0);
                        const avgSeconds = Number(stats.avg_seconds || 0);

                        setText('stats-total-success', formatNumber(total));
                        setText('stats-lt-1m', formatNumber(lt1));
                        setText('stats-1-3m', formatNumber(m1_3));
                        setText('stats-3-5m', formatNumber(m3_5));
                        setText('stats-5-10m', formatNumber(m5_10));
                        setText('stats-gt-10m', formatNumber(gt10));

                        setText('table-lt-1m', formatNumber(lt1));
                        setText('table-1-3m', formatNumber(m1_3));
                        setText('table-3-5m', formatNumber(m3_5));
                        setText('table-5-10m', formatNumber(m5_10));
                        setText('table-gt-10m', formatNumber(gt10));

                        setText('table-lt-1m-percent', calcPercent(lt1, total));
                        setText('table-1-3m-percent', calcPercent(m1_3, total));
                        setText('table-3-5m-percent', calcPercent(m3_5, total));
                        setText('table-5-10m-percent', calcPercent(m5_10, total));
                        setText('table-gt-10m-percent', calcPercent(gt10, total));

                        setText('processing-stats-note',
                            {{ \Illuminate\Support\Js::from(__('Thời gian xử lý trung bình: :time')) }}.replace(':time', formatDuration(avgSeconds)));
                    })
                    .catch((error) => {
                        console.error(error);
                        setText('processing-stats-note', error.message || {{ \Illuminate\Support\Js::from(__('Có lỗi khi tải thống kê')) }});
                    })
                    .finally(() => {
                        loadingEl.classList.add('d-none');
                        contentEl.style.opacity = '1';
                    });
            }

            function formatNumber(value) {
                return Number(value || 0).toLocaleString('vi-VN');
            }

            function setText(id, value) {
                const el = document.getElementById(id);
                if (el) el.textContent = value;
            }

            function calcPercent(value, total) {
                if (!total) return '0%';
                return ((value / total) * 100).toFixed(2) + '%';
            }

            function formatDuration(seconds) {
                seconds = Number(seconds || 0);

                if (seconds < 60) {
                    return `${seconds}s`;
                }

                const minutes = Math.floor(seconds / 60);
                const remainSeconds = seconds % 60;

                return `${minutes}p${String(remainSeconds).padStart(2, '0')}s`;
            }
        });
    </script>

@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.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') }}">
    <link rel="stylesheet" href="{{ asset('dist/css/cashout/cashout.css') }}">
    <link rel="stylesheet" href="{{ asset('dist/css/input.css') }}">
    <link rel="stylesheet" href="{{ asset('dist/css/cashout/vcb.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.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/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    <style>
        .cashout-content:hover {
            cursor: pointer;
        }

        @media (min-width: 576px) {
            .qr-code-left {
                margin-left: 50px;
            }

            .modal-dialog.qr-code-left {
                max-width: 450px;
            }
        }

        /* ===== Select2 tune ===== */
        .select2-container .select2-selection--single {
            height: 40px !important;
            border-radius: 10px !important;
            border-color: rgba(0, 0, 0, .12) !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px !important;
            padding-left: 12px !important;
            color: #263238;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px !important;
            right: 8px;
        }

        .select2-dropdown {
            border-radius: 10px !important;
            border-color: rgba(0, 0, 0, .12) !important;
            overflow: hidden;
        }

        /* ===== Loading overlay ===== */
        #loading-overlay {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            justify-content: center;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, .55);
            z-index: 9999;
            backdrop-filter: blur(2px);
        }

        #loading-overlay .spinner-border {
            width: 3.2rem;
            height: 3.2rem;
        }

        #loading-overlay .loading-text {
            font-size: 14px;
            color: #fff;
            opacity: .9;
        }

        .input-group {
            flex-wrap: nowrap !important;
        }

        /* Ép select2 nằm chung hàng và chiếm full phần còn lại */
        .input-group>.select2-container {
            flex: 1 1 auto !important;
            width: 1% !important;
            /* trick giống .form-control trong input-group */
        }

        /* Đồng bộ chiều cao + canh giữa */
        .select2-container--default .select2-selection--single {
            height: 40px !important;
            display: flex !important;
            align-items: center !important;
        }

        /* Đừng dùng line-height cứng gây lệch/wrap */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: normal !important;
            padding-left: 12px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
        }
    </style>
@endsection