@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>
            </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 name="partner" class="select2 form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getPartners() 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>
                                    <option value="not_done">Chưa thành công</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="datetime-local" class="form-control" name="from_create_date"
                                    id="from_create_date" value="{{ now()->format('Y-m-d') }}T00:00">
                                <input type="datetime-local" class="form-control" name="to_create_date" id="to_create_date"
                                    value="{{ now()->format('Y-m-d', strtotime('+1 day')) }}T23:59:59">
                            </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="datetime-local" class="form-control" name="from_complete_date"
                                    id="from_complete_date" value="">
                                <input type="datetime-local" class="form-control" name="to_complete_date"
                                    id="to_complete_date" value="">
                            </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-3">
                        <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>
                    @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">{{ __('sender_account') }}</span>
                                    </div>
                                    <input type="text" class="form-control" name="account_sender"
                                        placeholder="{{ __('Enter sending account') }}">
                                </div>
                            </div>
                        </div>
                    @endrole
                    @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">{{ __('Duyệt thủ công') }}</span>
                                </div>
                                <select name="manual_approval" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="1">{{ __('Duyệt thủ công') }}</option>
                                    <option value="0">{{ __('Duyệt auto') }}</option>
                                </select>
                            </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">{{ __('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')
                        @if (Auth::user()->split)
                            <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
                    @role('admin|support')
                        @if (config('app.name') == 'BBPay')
                            <a class="btn btn-sm btn-primary" href="{{ route('app.cashout.settingSplitOrder') }}"
                                id="setup-split-order" target="_blank">
                                {{ __('order split setup') }}
                            </a>
                        @endif

                        <button type="button" class="btn btn-sm btn-info"
                            id="btn-cashout-processing-time-stats">
                            <i class="fa-solid fa-stopwatch"></i> Thống kê thời gian xử lý
                        </button>

                        <button class="btn btn-sm 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')
                        <button class="btn btn-sm btn-danger d-none" id="cancelAllBtn">
                            Hủy đơn
                        </button>
                        {{-- <button class="btn btn-sm btn-secondary d-none" id="approveAllBtn">
                            Duyệt
                        </button> --}}
                        {{-- @can('bank_maintenance')
                            <a class="btn btn-sm btn-primary" href="{{ route('app.cashout.bankMaintenance') }}"
                                id="setupBankMaintenance" target="_blank">
                                {{ __('Set up maintenance bank')}}
                            </a>
                        @endcan --}}

                        <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>

                        @if (in_array(Auth::user()->username, ['admin', 'dev001', 'chadan1', 'locphuho', 'chadan8']))
                            <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)">
                                <i class="fa-solid fa-user-shield"></i> Quyền duyệt đơn (TG)
                            </a>
                        @endif
                    @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>{{ __('Thời gian xử lý') }}</th>
                                <th>{{ __('sender_account') }}</th>
                                <th>{{ __('Server Name') }}</th>
                                <th>{{ __('Callback') }}</th>
                                <th class="collapse-column">{{ __('response') }}</th>
                                {{-- <th>{{ __('Cổng xử lí') }}</th> --}}
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            {{-- Modal: Thống kê thời gian xử lý đơn cashout thành công --}}
            <div class="modal fade" id="cashoutProcessingTimeStatsModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Thống kê thời gian xử lý đơn cashout thành công</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="row text-center mb-3">
                                <div class="col-md-3"><div class="card p-2"><div class="text-muted">Tổng đơn thành công</div><h4 id="co-pt-total" class="mb-0">0</h4></div></div>
                                <div class="col-md-3"><div class="card p-2"><div class="text-muted">&lt; 3 phút</div><h4 id="co-pt-lt-3" class="mb-0 text-success">0</h4></div></div>
                                <div class="col-md-3"><div class="card p-2"><div class="text-muted">3 - 5 phút</div><h4 id="co-pt-3-5" class="mb-0 text-warning">0</h4></div></div>
                                <div class="col-md-3"><div class="card p-2"><div class="text-muted">5 - 10 phút</div><h4 id="co-pt-5-10" class="mb-0 text-info">0</h4></div></div>
                                <div class="col-md-3 mt-3"><div class="card p-2"><div class="text-muted">&gt; 10 phút</div><h4 id="co-pt-gt-10" class="mb-0 text-danger">0</h4></div></div>
                            </div>
                            <table class="table table-bordered table-striped text-center">
                                <thead><tr><th>Khoảng thời gian</th><th>Số đơn</th><th>Tỷ lệ</th></tr></thead>
                                <tbody>
                                    <tr><td>&lt; 3 phút</td><td id="co-pt-row-lt-3">0</td><td id="co-pt-ratio-lt-3">0%</td></tr>
                                    <tr><td>3 - 5 phút</td><td id="co-pt-row-3-5">0</td><td id="co-pt-ratio-3-5">0%</td></tr>
                                    <tr><td>5 - 10 phút</td><td id="co-pt-row-5-10">0</td><td id="co-pt-ratio-5-10">0%</td></tr>
                                    <tr><td>&gt; 10 phút</td><td id="co-pt-row-gt-10">0</td><td id="co-pt-ratio-gt-10">0%</td></tr>
                                </tbody>
                            </table>
                            <div class="text-center text-muted">Thời gian xử lý trung bình: <span id="co-pt-avg">0s</span></div>
                        </div>
                    </div>
                </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 @if (config('app.name') == 'BBPay') qr-code-left @endif">
                    <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" 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>
    </section>
@endsection


@section('scripts')
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
    <script 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 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>
                                            Đơ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>
        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();

            $('#search-cashout select[name="partner"]').select2({
                placeholder: "{{ __('select') }}",
                allowClear: true
            });
        });
    </script>
    <script>
        $('#export-cash-out').click(function(e) {
            e.preventDefault();
            var fromCreatedDate = document.getElementById('from_create_date').value;
            var toCreatedDate = document.getElementById('to_create_date').value;

            var fromCompleteDate = new Date(document.getElementById('from_complete_date').value);
            var toCompleteDate = new Date(document.getElementById('to_complete_date').value);

            if (fromCreatedDate > toCreatedDate || fromCompleteDate > toCompleteDate) {
                document.getElementById('date-error').textContent =
                    'Ngày bắt đầu phải nhỏ hơn hoặc bằng ngày kết thúc.';
                return;
            }
            fromCreatedDate = new Date(fromCreatedDate);
            toCreatedDate = new Date(toCreatedDate);
            var diffInTime = toCreatedDate.getTime() - fromCreatedDate.getTime();
            var diffInDays = diffInTime / (1000 * 3600 * 24);

            var checkCompleteTime = toCompleteDate.getTime() - fromCompleteDate.getTime();
            var diffCompleteInDays = checkCompleteTime / (1000 * 3600 * 24);

            if (diffInDays > 1 || diffCompleteInDays > 1) {
                document.getElementById('date-error').textContent =
                    'Khoảng thời gian không được lớn hơn 1 ngày.';
                return;
            }
            document.getElementById('date-error').textContent = '';
            $.ajax({
                type: 'POST',
                url: "{{ route('app.exportCashOut') }}",
                data: $('#search-cashout').serialize(),
                dataType: 'JSON',
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(function() {
                            window.open('/file-managers', '_blank');
                        }, 3000);
                    }
                },
                error: function(error) {
                    toastr.error(error);
                },
            });
        });
    </script>
    <script>
        jQuery(document).ready(function($) {
            var userRole = "{{ checkRoleUser() }}";
            // Bump this when columns are added/removed/reordered to invalidate stale stateSave caches
            // (otherwise DataTables restores an old column layout and throws
            // "Requested unknown parameter 'checkbox' for row 0, column 0").
            var LIST_CASHOUTS_STATE_VERSION = 2;
            var dataTable = $('#listCashouts').DataTable({
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                deferRender: true,
                stateSave: true,
                stateSaveParams: function(settings, data) {
                    data.__v = LIST_CASHOUTS_STATE_VERSION;
                },
                stateLoadParams: function(settings, data) {
                    if (data.__v !== LIST_CASHOUTS_STATE_VERSION ||
                        !data.columns ||
                        data.columns.length !== settings.aoColumns.length) {
                        return false;
                    }
                },
                searchDelay: 500,
                'pageLength': 20,
                'pagingType': 'input',
                'aLengthMenu': [
                    [20, 50, 100],
                    [20, 50, 100]
                ],
                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.request_id = $('#search-cashout [name="request_id"]').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',
                    },
                    {
                        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,
                        render: function(data, type, row) {
                            if (data === null || data === undefined || data === '') {
                                return '<span class="text-muted">__</span>';
                            }
                            // Server đã trả về string (vd "37s", "1p20s") cho status thành công
                            return '<span class="badge bg-info">' + data + '</span>';
                        }
                    },
                    {
                        data: 'sender',
                        visible: userRole,
                        orderable: false,
                    },
                    {
                        data: 'server_name',
                        className: 'text-center',
                        visible: userRole,
                        orderable: false,
                    },
                    {
                        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'
                },
            }).on('draw', 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');
            });

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

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

            function approveAllBtn() {
                if ($('input[name="cashoutCheckbox"]:checked').length > 0) {
                    $('button#approveAllBtn').text('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>' + 'Hủy đơn (' + $(
                        'input[name="cashoutCheckbox"]:checked').length + ')').removeClass('d-none');

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

            $(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: 'Xác nhận duyệt đơn?',
                        html: 'Bạn có chắc muốn duyệt <b>(' + checkedCashouts.length +
                            ')</b> đơn cashout này không?',
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: 'Đồng ý, Duyệt',
                        cancelButtonText: '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('Đã xảy ra lỗi: ' + error);
                                }
                            });
                        }
                    })
                }
            });

            $(document).ready(function() {
                $(document).on("click", ".select-gateway-btn", function() {
                    let cashoutId = $(this).data("cashout-id");
                    $("#selectGatewayModal").attr("data-cashout-id", cashoutId);
                });

                $(document).on("click", ".gateway-btn", function() {
                    var dataTable = $('#listCashouts').DataTable();
                    var pageInfo = dataTable.page.info();
                    let cashoutId = $("#selectGatewayModal").attr("data-cashout-id");
                    let gatewayId = $(this).data("gateway-id");
                    let gatewayName = $(this).data("gateway-name");
                    if (cashoutId && gatewayId) {
                        var csrfToken = '{{ csrf_token() }}';
                        swal.fire({
                            title: 'Xác nhận đẩy đơn cashout sang cổng ' + gatewayName +
                                '?',
                            html: 'Bạn có chắc muốn đẩy đơn cashout này không?',
                            showCancelButton: true,
                            icon: "question",
                            showCloseButton: true,
                            confirmButtonText: 'Đồng ý, Duyệt',
                            cancelButtonText: 'Huỷ',
                            confirmButtonColor: '#556ee6',
                            cancelButtonColor: '#d33',
                            allowOutsideClick: false,
                        }).then(function(result) {
                            if (result.value) {
                                $.ajax({
                                    url: "{{ route('app.cashout.changeGateway') }}",
                                    type: 'PUT',
                                    data: {
                                        cashoutId: cashoutId,
                                        gatewayId: gatewayId,
                                        _token: csrfToken
                                    },
                                    dataType: 'json',
                                    success: function(data) {
                                        if (data.code == 1) {
                                            $('#selectGatewayModal').modal(
                                                'hide');
                                            dataTable.page(pageInfo.page).draw(
                                                'page');
                                            toastr.success(data.msg);
                                        } else {
                                            $('#selectGatewayModal').modal(
                                                'hide');
                                            dataTable.page(pageInfo.page).draw(
                                                'page');
                                            toastr.error(data.msg);
                                        }
                                    },
                                    error: function(xhr, status, error) {
                                        $('#selectGatewayModal').modal('hide');
                                        toastr.error('Đã 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: 'Xác nhận hủy đơn?',
                        html: 'Bạn có chắc muốn hủy <b>(' + checkedCashouts.length +
                            ')</b> đơn cashout này không?',
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: 'Đồng ý, Duyệt',
                        cancelButtonText: '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('Đã xảy ra lỗi: ' + error);
                                }
                            });
                        }
                    })
                }
            });

            $('#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('Thất bại', 'Không có lịch sử giao dịch nào');
                                }
                                var content =
                                    '<table id="transactionDataTable" class="table table-bordered table-striped">';
                                content +=
                                    '<thead style="text-align: center"><tr><th>Mã giao dịch</th><th>Số tiền</th><th>Loại giao dịch</th><th>Phí</th><th>Nội dung</th><th>Thời gian</th><th>Trạng thái</th><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">Nhận tiền</span>' :
                                            '<span class="badge bg-secondary">Chuyển tiền</span>'
                                        ) +
                                        '</td>';
                                    content += '<td>' + numberFormat(transaction['fee']) +
                                        '</td>';
                                    content += '<td>' + transaction['content'] + '</td>';
                                    content += '<td>' + formatTimeHistory(transaction[
                                            'trans_time']) +
                                        '</td>';
                                    content += '<td>' + (transaction['status'] == 0 ?
                                            '<span class="badge bg-danger">Lỗi</span>' :
                                            '<span class="badge bg-success">Thành công</span>'
                                        ) +
                                        '</td>';
                                    content += '<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('Đã 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);
                }
            });

            $(document).on('click', '#btn-search', function(event) {
                event.preventDefault();
                var fromCreatedDate = document.getElementById('from_create_date').value;
                var toCreatedDate = document.getElementById('to_create_date').value;

                var fromCompleteDate = new Date(document.getElementById('from_complete_date').value);
                var toCompleteDate = new Date(document.getElementById('to_complete_date').value);

                if (fromCreatedDate > toCreatedDate || fromCompleteDate > toCompleteDate) {
                    document.getElementById('date-error').textContent =
                        'Ngày bắt đầu phải nhỏ hơn hoặc bằng ngày kết thúc.';
                    return;
                }
                fromCreatedDate = new Date(fromCreatedDate);
                toCreatedDate = new Date(toCreatedDate);
                var diffInTime = toCreatedDate.getTime() - fromCreatedDate.getTime();
                var diffInDays = diffInTime / (1000 * 3600 * 24);

                var checkCompleteTime = toCompleteDate.getTime() - fromCompleteDate.getTime();
                var diffCompleteInDays = checkCompleteTime / (1000 * 3600 * 24);

                if (diffInDays > 15 || diffCompleteInDays > 15) {
                    document.getElementById('date-error').textContent =
                        'Khoảng thời gian không được lớn hơn 15 ngày.';
                    return;
                }
                document.getElementById('date-error').textContent = '';
                dataTable.ajax.reload();
            });

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

                var fromCompleteDate = new Date(from_complete_date);
                var toCompleteDate = new Date(to_complete_date);
                if (from_create_date > to_create_date || fromCompleteDate > toCompleteDate) {
                    document.getElementById('date-error').textContent =
                        'Ngày bắt đầu phải nhỏ hơn hoặc bằng ngày kết thúc.';
                    $('#loading-overlay').addClass('d-none');
                    return;
                }
                var fromCreatedDate = new Date(from_create_date);
                var toCreatedDate = new Date(to_create_date);
                var diffInTime = toCreatedDate.getTime() - fromCreatedDate.getTime();
                var diffInDays = diffInTime / (1000 * 3600 * 24);

                var checkCompleteTime = toCompleteDate.getTime() - fromCompleteDate.getTime();
                var diffCompleteInDays = checkCompleteTime / (1000 * 3600 * 24);

                if (diffInDays > 1 || diffCompleteInDays > 1) {
                    document.getElementById('date-error').textContent =
                        'Khoảng thời gian không được lớn hơn 1 ngày.';
                    $('#loading-overlay').addClass('d-none');
                    return;
                }
                document.getElementById('date-error').textContent = '';
                $.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('Đã xảy ra lỗi khi lấy dữ liệu tổng Cashout.');
                    }
                });
            });

            $('#btn-cashout-processing-time-stats').click(function(e) {
                e.preventDefault();
                $('#loading-overlay').removeClass('d-none');
                $.ajax({
                    url: '{{ route('app.cashout.processingTimeStats') }}',
                    type: 'GET',
                    data: {
                        partner: $('#search-cashout [name="partner"]').val(),
                        from_create_date: $('#search-cashout [name="from_create_date"]').val(),
                        to_create_date: $('#search-cashout [name="to_create_date"]').val(),
                        handler: $('#search-cashout [name="handler"]').val(),
                    },
                    success: function(r) {
                        $('#loading-overlay').addClass('d-none');
                        $('#co-pt-total').text(numberFormat(r.total));
                        $('#co-pt-lt-3').text(numberFormat(r.lt_3_minutes.count));
                        $('#co-pt-3-5').text(numberFormat(r.between_3_5.count));
                        $('#co-pt-5-10').text(numberFormat(r.between_5_10.count));
                        $('#co-pt-gt-10').text(numberFormat(r.gt_10_minutes.count));
                        $('#co-pt-row-lt-3').text(numberFormat(r.lt_3_minutes.count));
                        $('#co-pt-row-3-5').text(numberFormat(r.between_3_5.count));
                        $('#co-pt-row-5-10').text(numberFormat(r.between_5_10.count));
                        $('#co-pt-row-gt-10').text(numberFormat(r.gt_10_minutes.count));
                        $('#co-pt-ratio-lt-3').text(r.lt_3_minutes.ratio + '%');
                        $('#co-pt-ratio-3-5').text(r.between_3_5.ratio + '%');
                        $('#co-pt-ratio-5-10').text(r.between_5_10.ratio + '%');
                        $('#co-pt-ratio-gt-10').text(r.gt_10_minutes.ratio + '%');
                        $('#co-pt-avg').text(r.avg_human);
                        $('#cashoutProcessingTimeStatsModal').modal('show');
                    },
                    error: function() {
                        $('#loading-overlay').addClass('d-none');
                        toastr.error('Đã xảy ra lỗi khi lấy thống kê thời gian xử lý.');
                    }
                });
            });

            $(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="">--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('Đã 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: "Xác nhận hoàn tiền và callback?",
                html: "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('Đã 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('Đã 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('Đã xảy ra lỗi: ' + error);
                }
            });
        }

        $(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('Đã 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('Đã 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('Đã 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('Đã 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('Đã 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: "Đồng ý",
                    cancelButtonText: "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('Đã xảy ra lỗi: ' + error);
                            }
                        });
                    }
                });
            } else {
                toastr.error("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();

            // Disable button to prevent multiple clicks
            $('#createCashout').prop('disabled', true);
            $('#spinner-create-cashout').show();
            $('#button-text-create-cashout').text('Đ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) {
                    $('#spinner-create-cashout').hide();
                    $('#button-text-create-cashout').text('Tạo CashOut');
                    $('#createCashout').prop('disabled', false); // Enable again

                    if (response.success == true) {
                        $('#offcanvasRightCreateCashout').offcanvas('hide');
                        dataTable.page(pageInfo.page).draw('page');
                        toastr.success(response.message);
                    } else {
                        $('#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-create-cashout').text('Tạo CashOut');
                    $('#createCashout').prop('disabled', false); // Enable lại khi lỗi
                    toastr.error('Có lỗi xảy ra');
                }
            });
        });

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

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link 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" />
    <style>
        table tbody {
            {{ $tableBodyStyle }}
        }

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

        .input-group>.select2-container {
            flex: 1 1 auto !important;
            width: 1% !important;
            min-width: 0;
        }

        .input-group>.select2-container .select2-selection--single {
            height: calc(2.25rem + 2px) !important;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            border: 1px solid #ced4da !important;
        }

        .input-group>.select2-container .select2-selection--single .select2-selection__rendered {
            line-height: calc(2.25rem) !important;
            padding-left: 12px !important;
        }

        .input-group>.select2-container .select2-selection--single .select2-selection__arrow {
            height: calc(2.25rem) !important;
        }
    </style>
@endsection