@extends('layouts.app')

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

@section('cashin')
    active
@endsection

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

@section('section.content')
    <section class="content">
        <div class="card">
            <div id="loading-overlay" class="overlay d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <div class="loading-text">{{ __('calculating_please_wait') }}</div>
            </div>
            <div class="card-body" style="background-color: #9fb69f">
                <form class="row" id="search-cashin">
                    @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">{{ __('transaction_type') }}</span>
                                </div>
                                <select name="bank_type" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="bank">{{ __('Bank') }}</option>
                                    @foreach (\App\Models\Bank\Bank::all() as $item)
                                        <option value="{{ $item->name }}">{{ $item->display_name }}</option>
                                    @endforeach
                                </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">{{ __('status') }}</span>
                                </div>
                                <select name="status" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="0">Lỗi</option>
                                    <option value="3">Chờ tiền</option>
                                    <option value="1">Thành công</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">{{ __('account') }}</span>
                                </div>
                                <input type="text" class="form-control" name="account"
                                    placeholder="{{ __('account') }}">
                            </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" 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" id="amount_to" name="amount_to"
                                    placeholder="{{ __('to') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('request_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="request_id"
                                    placeholder="{{ __('request_id') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-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>
                    @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">{{ __('Loại xử lý') }}</span>
                                    </div>
                                    <select name="operation_type" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        <option value="manual">Thủ công</option>
                                        <option value="auto">Tự động</option>
                                    </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">{{ __('code') }}</span>
                                </div>
                                <input type="text" class="form-control" name="code" placeholder="Code">
                            </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">{{ __('transaction_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="transaction_id" placeholder="Mã GD">
                            </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-cashin">{{ __('report') }}</button>
                    </div>
                    <span id="date-error" class="text-danger"></span>

                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('transaction_list') }}</h3>
                <div class="card-tools">
                    @role('admin|support')
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-gear"></i> Columns
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <div class="row p-2" style="width: 600px;">
                                @foreach ($getColumnfilter as $column)
                                    <div class="col-lg-6">
                                        <label class="dropdown-item toggle-vis" data-column="{{ $column['data_column'] }}">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                    id="data_column_{{ $column['data_column'] }}" checked />
                                                {{ $column['label'] }}
                                            </div>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </ul>
                    @endrole
                    @can('cashin_statistics')
                        <a class="btn btn-sm btn-primary" id="btn-statistics">{{ __('report') }}</a>
                        <a class="btn btn-sm btn-info" id="btn-processing-time-stats">Thống kê thời gian xử lý</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">{{ __('Tự động làm mới: Tắt') }}</span>
                                            </button> -->
                    <a class="btn btn-sm btn-secondary" id="export-cash-in" href="javascript:void(0)"><i
                            class="fa-solid fa-file-excel"></i>{{ __('export_excel') }}</a>
                </div>
            </div>
            <div id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
            </div>
            @if (Session::has('success'))
                <div id="message-alert" class="alert alert-success">
                    {{ Session::get('success') }}
                </div>
            @endif
            @if (Session::has('error'))
                <div id="message-alert" class="alert alert-danger">
                    {{ Session::get('error') }}
                </div>
            @endif
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="listCashins">
                        <thead style="text-align: center;  background-color: #b6b9b6"">
                            <tr>
                                <th>{{ __('order_id') }}</th>
                                <th>{{ __('request_id') }}</th>
                                <th>{{ __('partner') }}</th>
                                <th>{{ __('transaction_type') }}</th>
                                <th class="collapse-column">
                                    {{ __('code') }}</th>
                                <th>{{ __('account') }}</th>
                                <th>{{ __('request') }}</th>
                                <th>{{ __('amount_transferred') }}</th>
                                <th>{{ __('fee') }}</th>
                                <th>{{ __('balance') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('create_time-complete_time') }}</th>
                                <th>{{ __('Thời gian xử lý') }}</th>
                                <th>{{ __('transaction_id') }}</th>
                                <th>{{ __('note') }}</th>
                                <th>{{ __('Xử lí') }}</th>
                                <th>{{ __('Xử lí bởi') }}</th>
                                {{-- <th>{{ __('Cổng') }}</th> --}}
                                <th>{{ __('Server Name') }}</th>
                                <th>{{ __('Callback') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal fade" id="cashinTotalModal" tabindex="-1" aria-labelledby="cashinTotalModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-center" id="cashinTotalModalLabel">
                                {{ __('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">
                                        <thead style="background-color: #abb7ac">
                                            <tr>
                                                <th>{{ __('Transaction type') }}</th>
                                                <th>{{ __('Total amount actually transferred') }}</th>
                                                <th>{{ __('Total balance') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="total-per-bank">
                                            <tr id="sample-row" class="d-none">
                                                <td class="bank-name"></td>
                                                <td class="total-amount"></td>
                                                <td class="total-balance"></td>
                                            </tr>
                                            <tr id="total-all-amount" class="d-none" style="background-color: #1fce04">
                                                <td>{{ __('total') }}</td>
                                                <td class="total-all-amount"></td>
                                                <td class="total-all-balance"></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="cashinStatisticsModal" tabindex="-1"
                aria-labelledby="cashinStatisticsModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-center" id="cashinStatisticsModalLabel">
                                {{ __('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>{{ __('transaction_number') }}</td>
                                                <td><span id="countTransactionsToday"></span></td>
                                            </tr>
                                            <tr style="background-color: #55da5c">
                                                <td>{{ __('successful_transaction') }}</td>
                                                <td><span id="countSuccessTransactions"></span></td>
                                            </tr>
                                            <tr>
                                                <td>{{ __('percentage') }}</td>
                                                <td><span id="successPercentage"></span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ __('close') }}</button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Modal: Thống kê thời gian xử lý đơn cashin thành công --}}
            <div class="modal fade" id="processingTimeStatsModal" 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 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="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="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="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="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="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="pt-row-lt-3">0</td><td id="pt-ratio-lt-3">0%</td></tr>
                                    <tr><td>3 - 5 phút</td><td id="pt-row-3-5">0</td><td id="pt-ratio-3-5">0%</td></tr>
                                    <tr><td>5 - 10 phút</td><td id="pt-row-5-10">0</td><td id="pt-ratio-5-10">0%</td></tr>
                                    <tr><td>&gt; 10 phút</td><td id="pt-row-gt-10">0</td><td id="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="pt-avg">0s</span></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">Chỉnh sửa Cashin</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="cashin_id" id="cashin_id">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <label for="request-id">{{ __('request_id') }}</label>
                                    <input type="text" class="form-control" id="request_id" disabled>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="partner">{{ __('Mã khớp') }}</label>
                                    <input type="text" class="form-control" id="code" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <label for="partner">{{ __('partner') }}</label>
                                    <input type="text" class="form-control" id="partner" disabled>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="bank-account">{{ __('account') }}</label>
                                    <input type="text" class="form-control" id="account-no" disabled>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="amount-transfer">{{ __('amount_transferred') }}</label>
                                        <input type="text" class="form-control" id="amount_transfer"
                                            name="amount_transfer">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="amount">{{ __('Tiền yêu cầu') }}</label>
                                        <div class="input-group mb-3">
                                            <a id="copyButton" class="btn btn-primary"> <i
                                                    class="fa-solid fa-circle-chevron-left"></i></a>
                                            <input type="text" class="form-control" id="amount" name="amount"
                                                disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <label for="balance">{{ __('balance') }}</label>
                                    <input type="text" class="form-control" id="balance" name="balance" disabled>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="fee">{{ __('fee') }}</label>
                                    <input type="number" class="form-control" id="fee" name="fee" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="status">{{ __('status') }}</label>
                                <select name="status" id="status" class="form-control">
                                    <option value="0" id="error">Lỗi</option>
                                    <option value="1" id="success">Thành công</option>
                                    <option value="3" id="pending">Chờ tiền</option>
                                </select>
                                <input type="hidden" name="disabled_status" id="disabled_status">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="transaction-id">{{ __('Mã giao dịch (*)') }}</label>
                                <input type="text" class="form-control" name="transaction_id" id="transaction_id"
                                    placeholder="{{ __('Nhập mã giao dịch') }}" required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="note">{{ __('note') }}</label>
                                <textarea type="text" class="form-control" name="note" id="note"
                                    placeholder="{{ __('Nhập ghi chú') }}"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="text-center">
                                <button type="submit" id="saveButton" class="btn btn-success"><i
                                        class="fas fa-save"></i>
                                    {{ __('Lưu') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var amountInputs = document.querySelectorAll('.amount');

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

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

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

                    this.value = formattedValue;
                });
            });
        });
    </script>


    <script>
        $('#export-cash-in').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.exportCashIn') }}",
                data: $('#search-cashin').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>
        var dataTable;
        var userRole = "{{ checkRoleUser() }}";
        jQuery(document).ready(function($) {
            dataTable = $('#listCashins').DataTable({
                dom: 'lfirtp',
                processing: true,
                serverSide: true,
                'pageLength': 50,
                'pagingType': 'input',
                'aLengthMenu': [
                    [50, 100, 200, -1],
                    [50, 100, 200, 'All']
                ],
                ajax: {
                    url: '{{ route('app.cashinData') }}',
                    type: 'GET',
                    data: function(d) {
                        d.partner = $('#search-cashin [name="partner"]').val();
                        d.bank_type = $('#search-cashin [name="bank_type"]').val();
                        d.status = $('#search-cashin [name="status"]').val();
                        d.from_create_date = $('#search-cashin [name="from_create_date"]').val();
                        d.to_create_date = $('#search-cashin [name="to_create_date"]').val();
                        d.from_complete_date = $('#search-cashin [name="from_complete_date"]').val();
                        d.to_complete_date = $('#search-cashin [name="to_complete_date"]').val();
                        d.account = $('#search-cashin [name="account"]').val();
                        d.amount_from = $('#search-cashin [name="amount_from"]').val();
                        d.amount_to = $('#search-cashin [name="amount_to"]').val();
                        d.operation_type = $('#search-cashin [name="operation_type"]').val();
                        d.request_id = $('#search-cashin [name="request_id"]').val();
                        d.code = $('#search-cashin [name="code"]').val();
                        d.transaction_id = $('#search-cashin [name="transaction_id"]').val();
                        // d.gate = $('#search-cashin [name="gate"]').val();
                    },
                    error: function(xhr, status, error) {
                        if (status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                columns: [{
                        data: 'cash_in_id',
                        className: 'text-center',
                    },
                    {
                        data: 'request_id',
                        className: 'text-center',
                    },
                    {
                        data: 'user_id',
                        className: 'text-center',
                    },
                    {
                        data: 'icon_displayname',
                        name: 'icon_displayname',
                        render: function(data, type, full, meta) {
                            return data;
                        },
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: 'code',
                        className: 'collapse-column',
                        orderable: false,
                    },
                    {
                        data: 'bank_account_id',
                        className: 'text-right',
                    },
                    {
                        data: 'amount',
                        render: (data) => {
                            return numberFormat(data);
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'amount_transfer',
                        render: (data) => {
                            return numberFormat(data);
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'fee',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                return data + '%';
                            }
                            return data;
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'balance',
                        render: (data) => {
                            if (data === 0) {
                                return '__';
                            }
                            return '<span class="badge bg-success">+' + numberFormat(data) +
                                '</span>';
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'status',
                        name: 'status',
                        className: 'text-center check-status',
                    },
                    {
                        data: null,
                        name: 'created_at',
                        render: function(data) {
                            var createdTime = formatTime(data.created_at);
                            var countdownTime = data.countdown_time;
                            if (countdownTime) {
                                var remainingTime = moment(countdownTime).diff(moment(), 'seconds');
                                if (remainingTime <= 0) {
                                    countdownTime = '<span class="badge bg-danger">Expired</span>';
                                } else {
                                    var minutes = Math.floor(remainingTime / 60);
                                    var seconds = remainingTime % 60;
                                    var formattedTime = (minutes < 10 ? '0' : '') + minutes + ':' +
                                        (seconds < 10 ? '0' : '') + seconds;
                                    countdownTime = '<span class="countdown-timer">' +
                                        formattedTime + '</span>';
                                }
                            } else {
                                countdownTime = '';
                            }
                            return createdTime + '<br>' + countdownTime;
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'processing_time',
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, row) {
                            if (!data) return '<span class="text-muted">__</span>';
                            return '<span class="badge bg-info">' + data + '</span>';
                        }
                    },
                    {
                        data: 'transaction_id',
                        visible: userRole
                    },
                    {
                        data: 'note',
                        visible: userRole
                    },
                    {
                        data: 'operation',
                        render: function(data, type, row) {
                            if (data === 'manual') {
                                return `<span class="badge bg-primary">Thủ công</span>`;
                            } else if (data === 'auto') {
                                return `<span class="badge bg-secondary">Tự động</span>`;
                            } else {
                                return '';
                            }
                        },
                        visible: userRole
                    },
                    {
                        data: 'handler',
                        visible: userRole
                    },
                    // {
                    //     data: 'gate',
                    //     visible: userRole
                    // },
                    {
                        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">Đã callback</span>';
                            } else {
                                return '<span class="badge bg-secondary">Chưa callback</span>';
                            }
                        },
                        visible: userRole
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        className: 'text-center',
                        render: function(data, type, row) {
                            return data.actions;
                        },
                        searchable: false,
                        visible: userRole ? true : false
                    },
                ],
                rowCallback: rowCallback,
                order: [
                    [11, 'desc']
                ],
                // initComplete: function() {
                //     this.api()
                //         .columns([0, 1, 4])
                //         .every(function() {
                //             var column = this;
                //             var title = column.footer().textContent;

                //             $('<input type="text" placeholder="' + title + '" />')
                //                 .appendTo($(column.footer()).empty())
                //                 .on('keyup change clear', function() {
                //                     if (column.search() !== this.value) {
                //                         column.search(this.value).draw();
                //                     }
                //                 });
                //         });
                // }
            });
            // $('#listCashins tfoot tr').appendTo('#listCashins thead');

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

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

            $('#listCashins').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')) {
                        dataTable.destroy();
                    }
                    fetchTransactionHistory(currentOffset, 20, null, null);
                }

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

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

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

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

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

            $(document).on('click', '.btnManualAppoval', function() {
                var dataTable = $('#listCashins').DataTable();
                var pageInfo = dataTable.page.info();
                Swal.fire({
                    title: "Xác nhận duyệt thủ công?",
                    html: "Bạn có chắc chắn muốn duyệt đơn hàng này? Hệ thống sẽ cập nhật số dư, trạng thái đơn hàng và callback.",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: "Đồng ý",
                    cancelButtonText: "Hủy"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#loading-overlay').removeClass('d-none');
                        var cashinId = $(this).data('cashin-id');

                        $.ajax({
                            type: 'POST',
                            url: '/cashin/' + cashinId + '/manual-approval',
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            success: function(data) {
                                $('#loading-overlay').addClass('d-none');
                                if (data.code === 0) {
                                    dataTable.page(pageInfo.page).draw('page');
                                    toastr.error(data.msg);
                                } else if (data.code === 1) {
                                    dataTable.page(pageInfo.page).draw('page');
                                    toastr.success(data.msg);
                                } else {
                                    dataTable.page(pageInfo.page).draw('page');
                                    toastr.error('Có lỗi xảy ra.');
                                }
                            },
                            error: function(error) {
                                $('#loading-overlay').addClass('d-none');
                                toastr.error(error);
                            }
                        });
                    }
                });
            });

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

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

            $(document).on('click', '.extend-time', function() {
                var dataTable = $('#listCashins').DataTable();
                var pageInfo = dataTable.page.info();
                var cashinId = $(this).data('cashin-id');
                var currentRow = $(this).closest('tr');
                var countdownCell = currentRow.find('.countdown-timer');

                $.ajax({
                    url: '/extend-time-cashin/' + cashinId,
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.code === 1) {
                            countdownCell.text = response.countdown_time;
                            dataTable.page(pageInfo.page).draw('page');
                            toastr.success(response.msg);
                        } else {
                            toastr.error(response.msg);
                            dataTable.page(pageInfo.page).draw('page');
                        }
                    },
                    error: function() {
                        toastr.error('Có lỗi xảy ra');
                    }
                });
            });

            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('Tự động làm mới: Tắt');
                } else {
                    $(this).data('auto-refresh', true);
                    $(this).find('#refresh-text').text('Tự động làm mới: Bật');
                    autoRefreshInterval = setInterval(refreshData, 10000);
                }
            });
            $(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();
            });

            function rowCallback(row, data) {
                var createdDate = data.created_at;
                var status = data.status;
                var updatedDate = data.completed_at ?? data.updated_at;
                var countdownCell = $(row).find('td:nth-child(12)');

                if (status == '<span class="badge bg-danger">{{ __('error') }}</span>') {
                    $(row).css('color', 'red');
                } else if (status == '<span class="badge bg-success">{{ __('success') }}</span>') {
                    countdownCell.html(formatTime(createdDate) +
                        '<br>' +
                        formatTime(updatedDate));
                } else {
                    if (countdownCell.text() !== 'Expired') {
                        countdownCell.html(formatTime(createdDate) +
                            '<br><span class="countdown-timer" data-countdown-time="' +
                            updatedDate +
                            '" data-countdown-time-minutes="' +
                            (data.countdown_time_minutes == 0 ? 10 : data.countdown_time_minutes) +
                            '"></span>');
                        updateCountdownTimers();
                        setInterval(updateCountdownTimers, 1000);
                    }
                }
            }


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

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

                var partner = $('#search-cashin [name="partner"]').val();
                var from_create_date = $('#search-cashin [name="from_create_date"]').val();
                var to_create_date = $('#search-cashin [name="to_create_date"]').val();
                var from_complete_date = $('#search-cashin [name="from_complete_date"]').val();
                var to_complete_date = $('#search-cashin [name="to_complete_date"]').val();
                var bank_type = $('#search-cashin [name="bank_type"]').val();
                var status = $('#search-cashin [name="status"]').val();
                var account = $('#search-cashin [name="account"]').val();
                var amount_from = $('#search-cashin [name="amount_from"]').val();
                var amount_to = $('#search-cashin [name="amount_to"]').val();
                var operation_type = $('#search-cashin [name="operation_type"]').val();
                // var gate = $('#search-cashin [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.cashin.reportCashInByType') }}',
                    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,
                        bank_type: bank_type,
                        status: status,
                        account: account,
                        amount_from: amount_from,
                        amount_to: amount_to,
                        operation_type: operation_type,
                        // gate: gate
                    },
                    success: function(response) {
                        $('#loading-overlay').addClass('d-none');
                        var totalByBankType = response.totals_by_bank_type;
                        var total_all_amount = response.total_all_amount;
                        var total_all_balance = response.total_all_balance;
                        var sampleRow = $('#sample-row').clone().removeClass('d-none');
                        var totalAllAmount = $('#total-all-amount').clone().removeClass(
                            'd-none');
                        $('#total-per-bank').empty();

                        $.each(totalByBankType, function(index, bankTypeData) {
                            var bankName = bankTypeData.display_name;
                            var totalAmount = numberFormat(bankTypeData
                                .total_amount_transfer);
                            var totalBalance = numberFormat(bankTypeData
                                .total_balance);
                            var newRow = sampleRow.clone();
                            newRow.find('.bank-name').text(bankName);
                            newRow.find('.total-amount').text(totalAmount);
                            newRow.find('.total-balance').text(totalBalance);
                            $('#total-per-bank').append(newRow);

                        });
                        if (totalByBankType.length == 0) {
                            $('#total-per-bank').append(sampleRow.addClass('d-none'));
                        }
                        var totalRow = totalAllAmount.clone();
                        totalRow.find('.total-all-amount').text(numberFormat(total_all_amount));
                        totalRow.find('.total-all-balance').text(numberFormat(
                            total_all_balance));
                        $('#total-per-bank').append(totalRow);

                        $('#cashinTotalModal').modal('show');
                    },
                    error: function() {
                        $('#loading-overlay').addClass('d-none');
                        toastr.error('Đã xảy ra lỗi khi lấy dữ liệu tổng Cashin.');
                    }
                });
            });

            $('#btn-statistics').click(function(e) {
                $.ajax({
                    url: '{{ route('app.cashin.statistics') }}',
                    type: 'GET',
                    success: function(response) {
                        $('#countTransactionsToday').text(response
                            .countTransactionsToday);
                        $('#countSuccessTransactions').text(response
                            .countSuccessTransactions);
                        $('#successPercentage').text(response.successPercentage);
                        $('#cashinStatisticsModal').modal('show');
                    },
                    error: function() {
                        toastr.error('Đã xảy ra lỗi khi thống kê dữ liệu.');
                    }
                });
            });

            $('#btn-processing-time-stats').click(function(e) {
                e.preventDefault();
                $('#loading-overlay').removeClass('d-none');
                $.ajax({
                    url: '{{ route('app.cashin.processingTimeStats') }}',
                    type: 'GET',
                    data: {
                        partner: $('#search-cashin [name="partner"]').val(),
                        from_create_date: $('#search-cashin [name="from_create_date"]').val(),
                        to_create_date: $('#search-cashin [name="to_create_date"]').val(),
                    },
                    success: function(r) {
                        $('#loading-overlay').addClass('d-none');
                        $('#pt-total').text(numberFormat(r.total));
                        $('#pt-lt-3').text(numberFormat(r.lt_3_minutes.count));
                        $('#pt-3-5').text(numberFormat(r.between_3_5.count));
                        $('#pt-5-10').text(numberFormat(r.between_5_10.count));
                        $('#pt-gt-10').text(numberFormat(r.gt_10_minutes.count));
                        $('#pt-row-lt-3').text(numberFormat(r.lt_3_minutes.count));
                        $('#pt-row-3-5').text(numberFormat(r.between_3_5.count));
                        $('#pt-row-5-10').text(numberFormat(r.between_5_10.count));
                        $('#pt-row-gt-10').text(numberFormat(r.gt_10_minutes.count));
                        $('#pt-ratio-lt-3').text(r.lt_3_minutes.ratio + '%');
                        $('#pt-ratio-3-5').text(r.between_3_5.ratio + '%');
                        $('#pt-ratio-5-10').text(r.between_5_10.ratio + '%');
                        $('#pt-ratio-gt-10').text(r.gt_10_minutes.ratio + '%');
                        $('#pt-avg').text(r.avg_human);
                        $('#processingTimeStatsModal').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', '.recallbackCashin', function() {
            var $form = $(this).closest('form');
            var dataTable = $('#listCashins').DataTable();
            var pageInfo = dataTable.page.info();
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                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 formatTime(isoTime) {
            try {
                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 `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            } catch (e) {}
            return null;
        }

        function updateCountdownTimers() {
            $('.countdown-timer').each(function() {
                var countdownTime = $(this).data('countdown-time');
                var countdownTimeMinutes = $(this).data('countdown-time-minutes');
                if (!countdownTime || countdownTime === 'Expired') {
                    $(this).html('<span class="badge bg-danger">Expired</span>');
                } else {
                    var countDownDate = moment(countdownTime).add(countdownTimeMinutes, 'minutes');
                    var now = moment();
                    var diff = countDownDate.diff(now);

                    if (diff <= 0) {
                        $(this).html('<span class="badge bg-danger">Expired</span>');
                    } else {
                        var duration = moment.duration(diff);
                        var minutes = duration.minutes();
                        var seconds = duration.seconds();
                        var formattedTime = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
                        $(this).html('<span class="badge bg-warning">' + formattedTime + '</span>');
                    }
                }
            });
        }

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

        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();
            }
        }
    </script>
    <script>
        $(document).on('click', '#edit-cashin', function() {
            const cashinId = $(this).data('cashin-id');

            $.ajax({
                url: '/get-cashin-data/' + cashinId,
                method: 'GET',
                success: function(response) {
                    $('#cashin_id').val(response.cashin.cash_in_id);
                    $('#request_id').val(response.cashin.request_id);
                    $('#code').val(response.cashin.code);
                    $('#partner').val(response.partner);
                    $('#account-no').val(response.account_no);
                    $('#amount_transfer').val(numberFormat(response.cashin.amount_transfer));
                    $('#amount').val(numberFormat(response.cashin.amount));
                    $('#balance').val(numberFormat(response.cashin.balance));
                    $('#fee').val(response.cashin.fee);
                    $('#transaction_id').val(response.cashin.transaction_id);
                    $('#note').val(response.cashin.note);
                    $('#status').val(response.cashin.status);
                    $('#disabled_status').val(response.cashin.status);
                    if (response.cashin.status === 1) {
                        $('#status').prop('disabled', true);
                    } else if (response.cashin.status === 0) {
                        $('#error').prop('selected', true);
                    } else if (response.cashin.status === 3) {
                        $('#pending').prop('selected', true);
                    }
                },
                error: function(error) {
                    console.error('Lỗi lấy thông tin cashin:', error);
                    toastr.error(error);
                }
            });
        });

        var isConfirmed = false;
        document.getElementById('saveButton').addEventListener('click', function(event) {
            event.preventDefault();
            saveData();
        });
        document.getElementById('copyButton').addEventListener('click', function(event) {
            $('#amount_transfer').val($('#amount').val());
        });

        function saveData() {
            var transactionId = document.getElementById('transaction_id').value;
            var cashin_id = document.getElementById('cashin_id').value;
            var dataTable = $('#listCashins').DataTable();
            var pageInfo = dataTable.page.info();
            if (!transactionId || isConfirmed) {
                $.ajax({
                    url: '/cashin/' + cashin_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) {
                        console.log('Lỗi: ', error);
                        toastr.error('Đã xảy ra lỗi: ' + error);
                    }
                });
            } else {
                var amountTransferStr = document.getElementById('amount_transfer').value;
                var amountTransfer = parseFloat(amountTransferStr.replace(/,/g, ''));
                Swal.fire({
                    title: "Xác nhận lưu đơn hàng?",
                    html: "Bạn có chắc chắn muốn lưu đơn hàng này không?<br>Thực chuyển: " +
                        "<span class='badge bg-danger'>" + numberFormat(amountTransfer) +
                        "</span>" +
                        " - Mã giao dịch: " + "<span class='badge bg-danger'>" + document.getElementById(
                            'transaction_id').value + "</span>",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: "Đồng ý",
                    cancelButtonText: "Hủy"
                }).then((result) => {
                    if (result.isConfirmed) {
                        isConfirmed = true;
                        $.ajax({
                            url: '/cashin/' + cashin_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) {
                                console.log('Lỗi: ', error);
                                toastr.error('Đã xảy ra lỗi: ' + error);
                            },
                            complete: function() {
                                isConfirmed = false;
                            }
                        });
                    }
                });
            }
        }

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

    <script>
        $(document).ready(function() {
            $('#search-cashin select[name="partner"]').select2({
                placeholder: "{{ __('select') }}",
                allowClear: true
            });

            // Format live cho ô amount_transfer trong offcanvas
            $(document).on('input', '#amount_transfer', function() {
                const formatted = formatThousandsVN($(this).val(), '.');
                $(this).val(formatted);

                try {
                    this.setSelectionRange(this.value.length, this.value.length);
                } catch (e) {}
            });
        });
    </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://cdn.datatables.net/1.10.24/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('dist/css/cashin/cashin.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">

    <style>
        tfoot {
            display: table-header-group;
        }

        /* ===== 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