@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 id="partner" 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">{{ __('expired') }}</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-4">
                        <div class="form-group">
                            <div class="input-group input-group-create-time" id="createTimeGroup">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('create_time') }}</span>
                                </div>

                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Từ') }}</span>
                                </div>
                                <input type="text" class="form-control" name="from_create_date" id="from_create_date"
                                    autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">

                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Đến') }}</span>
                                </div>
                                <input type="text" class="form-control" name="to_create_date" id="to_create_date"
                                    autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">
                            </div>
                        </div>
                    </div>

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

                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Từ') }}</span>
                                </div>
                                <input type="text" class="form-control" name="from_complete_date"
                                    id="from_complete_date" autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">

                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Đến') }}</span>
                                </div>
                                <input type="text" class="form-control" name="to_complete_date" id="to_complete_date"
                                    autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">
                            </div>
                        </div>
                    </div>
                    @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">{{ __('request_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="request_id"
                                    placeholder="{{ __('request_id') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('order_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="cash_in_id"
                                    placeholder="{{ __('order_id') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('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">{{ __('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 type="button" class="btn btn-info" data-bs-toggle="modal"
                            data-bs-target="#processingStatsModal">
                            <i class="bx bx-bar-chart-alt-2 me-1"></i> {{ __('Thống kê thời gian xử lý') }}
                        </button>
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-gear"></i> Columns
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <div class="row p-2" style="width: 600px;">
                                @foreach ($getColumnfilter as $column)
                                    <div class="col-lg-6">
                                        <label class="dropdown-item toggle-vis" data-column="{{ $column['data_column'] }}">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                    id="data_column_{{ $column['data_column'] }}" checked />
                                                {{ $column['label'] }}
                                            </div>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </ul>
                    @endrole
                    @can('cashin_statistics')
                        <a class="btn btn-sm btn-primary" id="btn-statistics">{{ __('report') }}</a>
                    @endcan
                    <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>
                    @role('admin')
                        <a class="btn btn-sm btn-success" id="export-cash-in-csv" href="javascript:void(0)"
                            title="{{ __('Xuất CSV - dùng cho dữ liệu lớn, tải nhanh, mở được bằng Excel') }}">
                            <i class="fa-solid fa-file-csv"></i> {{ __('Xuất CSV') }}
                        </a>
                    @endrole
                </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>{{ __('processing_time') }}</th>
                                <th>{{ __('note') }}</th>
                                <th>{{ __('Xử lí') }}</th>
                                <th>{{ __('Xử lí bởi') }}</th>
                                <th>{{ __('Cổng') }}</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 mb-0">
                                        <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"></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>

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

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

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

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

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

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

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

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

@section('scripts')
    <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>window.applyDataTableLang && window.applyDataTableLang(jQuery);</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 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js">
    </script>

    <script>
        const DATE_TIME_FORMAT = 'DD-MM-YYYY HH:mm:ss';

        function onlyDigits(value) {
            return String(value || '').replace(/[^\d]/g, '');
        }

        function formatThousandsVN(value, separator = '.') {
            const digits = onlyDigits(value);
            if (!digits) return '';
            return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
        }

        function parseFormattedNumber(value) {
            const digits = onlyDigits(value);
            return digits ? parseInt(digits, 10) : 0;
        }

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

        function parseDmyHis(s) {
            const raw = (s || '').trim();
            if (!raw) return null;
            const m = moment(raw, DATE_TIME_FORMAT, true);
            return m.isValid() ? m.toDate() : null;
        }

        function diffDays(a, b) {
            return (b.getTime() - a.getTime()) / (1000 * 3600 * 24);
        }

        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 formatTimeHistory(timestamp) {
            try {
                const date = new Date(timestamp * 1000);

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

                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            } catch (error) {
                return error.toString();
            }
        }

        function showDateError(message = '') {
            $('#date-error').text(message);
        }

        function showFullPageLoading() {
            $('#loading-overlay').removeClass('d-none');
        }

        function hideFullPageLoading() {
            $('#loading-overlay').addClass('d-none');
        }

        function hideEditOffcanvas() {
            const offcanvasEl = document.getElementById('offcanvasRight');
            if (!offcanvasEl) return;

            if (window.bootstrap && bootstrap.Offcanvas) {
                const instance = bootstrap.Offcanvas.getOrCreateInstance(offcanvasEl);
                instance.hide();
            } else {
                $('#offcanvasRight').offcanvas('hide');
            }
        }

        function validateDateRange(options = {}) {
            const {
                fromSelector,
                toSelector,
                label,
                maxDays,
                required = false
            } = options;

            const fromStr = $(fromSelector).val()?.trim() || '';
            const toStr = $(toSelector).val()?.trim() || '';

            if (!fromStr && !toStr && !required) {
                return {
                    ok: true
                };
            }

            if (required && (!fromStr || !toStr)) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__(':label: thiếu thời gian hoặc sai định dạng :format.')) }}.replace(':label', label).replace(':format', DATE_TIME_FORMAT)
                };
            }

            if ((fromStr && !toStr) || (!fromStr && toStr)) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__(':label: cần nhập đầy đủ cả ngày bắt đầu và ngày kết thúc.')) }}.replace(':label', label)
                };
            }

            const from = moment(fromStr, DATE_TIME_FORMAT, true);
            const to = moment(toStr, DATE_TIME_FORMAT, true);

            if (!from.isValid() || !to.isValid()) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__(':label: thiếu thời gian hoặc sai định dạng :format.')) }}.replace(':label', label).replace(':format', DATE_TIME_FORMAT)
                };
            }

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

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

            return {
                ok: true
            };
        }

        /**
         * Tìm kiếm / Báo cáo / Xuất file chỉ cần MỘT trong hai khoảng thời gian:
         * "Thời gian tạo" HOẶC "Thời gian hoàn thành".
         *
         * Đơn tạo hôm trước nhưng hôm sau mới hoàn thành, nên khi đối soát số dư
         * phải lọc được riêng theo ngày hoàn thành. Vẫn bắt buộc có ít nhất một
         * khoảng đầy đủ Từ - Đến để truy vấn không quét toàn bộ bảng.
         */
        function validateSearchRanges(maxDays) {
            const createRange = validateDateRange({
                fromSelector: '#from_create_date',
                toSelector: '#to_create_date',
                label: {{ \Illuminate\Support\Js::from(__('Thời gian tạo')) }},
                maxDays: maxDays,
                required: false
            });

            if (!createRange.ok) {
                return createRange;
            }

            const completeRange = validateDateRange({
                fromSelector: '#from_complete_date',
                toSelector: '#to_complete_date',
                label: {{ \Illuminate\Support\Js::from(__('Thời gian hoàn thành')) }},
                maxDays: maxDays,
                required: false
            });

            if (!completeRange.ok) {
                return completeRange;
            }

            const hasCreate = !!($('#from_create_date').val() || '').trim() &&
                !!($('#to_create_date').val() || '').trim();
            const hasComplete = !!($('#from_complete_date').val() || '').trim() &&
                !!($('#to_complete_date').val() || '').trim();

            if (!hasCreate && !hasComplete) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__('Vui lòng nhập đủ Từ - Đến của Thời gian tạo hoặc Thời gian hoàn thành.')) }}
                };
            }

            return {
                ok: true
            };
        }

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

    <script>
        $(document).ready(function() {
            $('#search-cashin select[name="partner"]').select2({
                width: '100%',
                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>

    <script>
        $(function() {
            const isMobile = window.matchMedia('(max-width: 992px)').matches;
            const startToday = moment().startOf('day');
            const endToday = moment().endOf('day').set({
                millisecond: 0
            });

            function pickerOpts(extra = {}) {
                return Object.assign({
                    format: DATE_TIME_FORMAT,
                    sideBySide: !isMobile,
                    showClear: true,
                    showClose: true,
                    allowInputToggle: true,
                    widgetPositioning: {
                        horizontal: 'auto',
                        vertical: 'bottom'
                    }
                }, extra);
            }

            $('#from_create_date').datetimepicker(pickerOpts());
            $('#to_create_date').datetimepicker(pickerOpts({
                useCurrent: false
            }));
            $('#from_complete_date').datetimepicker(pickerOpts());
            $('#to_complete_date').datetimepicker(pickerOpts({
                useCurrent: false
            }));

            $('#from_create_date').data('DateTimePicker').date(startToday);
            $('#to_create_date').data('DateTimePicker').date(endToday);
            $('#from_create_date').val(startToday.format(DATE_TIME_FORMAT));
            $('#to_create_date').val(endToday.format(DATE_TIME_FORMAT));

            $('#from_complete_date').val('');
            $('#to_complete_date').val('');

            // Không ràng buộc min/max chéo giữa 2 ô (tránh việc 2 ô tự kéo/đá nhau khi
            // chọn tháng cũ). Việc kiểm tra "Từ <= Đến" đã được xử lý trong
            // validateDateRange() lúc bấm Tìm kiếm / Báo cáo / Export.

            function normalize(selector) {
                $(document).on('blur', selector, function() {
                    const raw = ($(this).val() || '').trim();
                    if (!raw) return;
                    const m = moment(raw, DATE_TIME_FORMAT, true);
                    $(this).val(m.isValid() ? m.format(DATE_TIME_FORMAT) : '');
                });
            }

            normalize('#from_create_date');
            normalize('#to_create_date');
            normalize('#from_complete_date');
            normalize('#to_complete_date');
        });
    </script>

    <script>
        // Dùng chung cho cả 2 nút: Xuất Excel (xlsx) và Xuất CSV (admin)
        function submitCashInExport(actionUrl) {
            const range = validateSearchRanges(15);

            if (!range.ok) {
                showDateError(range.message);
                return;
            }

            showDateError('');
            showFullPageLoading();

            // File do queue worker 'export' tạo — tải ở trang quản lí file.
            $.ajax({
                url: actionUrl,
                type: "POST",
                data: $('#search-cashin').serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    hideFullPageLoading();
                    if (response.success) {
                        toastr.success(response.message ||
                            {{ \Illuminate\Support\Js::from(__('Đang tạo file, vui lòng vào "Quản lí file tải xuống" để tải.')) }});
                        // Sang trang quan li file de nguoi dung thay ngay tien do.
                        setTimeout(function() {
                            window.location.href = "{{ route('app.file.index') }}";
                        }, 3000);
                    } else {
                        toastr.error(response.message || {{ \Illuminate\Support\Js::from(__('Có lỗi khi xuất file.')) }});
                    }
                },
                error: function(xhr) {
                    hideFullPageLoading();
                    const msg = (xhr.responseJSON && xhr.responseJSON.message) ||
                        {{ \Illuminate\Support\Js::from(__('Có lỗi khi xuất file. Vui lòng thử lại.')) }};
                    toastr.error(msg);
                }
            });
        }

        $('#export-cash-in').on('click', function(e) {
            e.preventDefault();
            submitCashInExport("{{ route('app.exportCashIn') }}");
        });

        @role('admin')
            $('#export-cash-in-csv').on('click', function(e) {
                e.preventDefault();
                submitCashInExport("{{ route('app.exportCashInCsv') }}");
            });
        @endrole
    </script>

    <script>
        var dataTable;
        var countdownInterval = null;
        var userRole = "{{ checkRoleUser() }}";

        jQuery(document).ready(function($) {
            dataTable = $('#listCashins').DataTable({
                dom: 'lirtp',
                processing: true,
                serverSide: true,
                pageLength: 50,
                pagingType: 'input',
                aLengthMenu: [
                    [50, 100, 200, 500],
                    [50, 100, 200, 500]
                ],
                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.cash_in_id = $('#search-cashin [name="cash_in_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) {
                            return data;
                        },
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: 'code',
                        className: 'collapse-column',
                        orderable: false,
                    },
                    {
                        data: 'bank_account_id',
                        className: 'text-right',
                    },
                    {
                        data: 'amount',
                        render: function(data) {
                            return numberFormat(data);
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'amount_transfer',
                        render: function(data) {
                            return numberFormat(data);
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'fee',
                        render: function(data, type) {
                            if (type === 'display') {
                                return data + '%';
                            }
                            return data;
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'balance',
                        render: function(data) {
                            if (Number(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,
                        searchable: false,
                        visible: userRole
                    },
                    {
                        data: 'note',
                        visible: userRole
                    },
                    {
                        data: 'operation',
                        render: function(data) {
                            if (data === 'manual') {
                                return `<span class="badge bg-primary">${ {{ \Illuminate\Support\Js::from(__('Thủ công')) }} }</span>`;
                            } else if (data === 'auto') {
                                return `<span class="badge bg-secondary">${ {{ \Illuminate\Support\Js::from(__('Tự động')) }} }</span>`;
                            } else {
                                return '';
                            }
                        },
                        visible: userRole
                    },
                    {
                        data: 'handler',
                        visible: userRole
                    },
                    {
                        data: 'gate',
                        visible: userRole
                    },
                    {
                        data: 'is_callback',
                        render: function(data) {
                            if (data === 1) {
                                return '<span class="badge bg-primary">' + {{ \Illuminate\Support\Js::from(__('Đã callback')) }} + '</span>';
                            } else {
                                return '<span class="badge bg-secondary">' + {{ \Illuminate\Support\Js::from(__('Chưa callback')) }} + '</span>';
                            }
                        },
                        visible: userRole
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        className: 'text-center',
                        render: function(data) {
                            return data.actions;
                        },
                        searchable: false,
                        visible: userRole ? true : false
                    },
                ],
                rowCallback: rowCallback,
                order: [
                    [11, 'desc']
                ],
            });

            if (!countdownInterval) {
                countdownInterval = setInterval(updateCountdownTimers, 1000);
            }

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

            function refreshData() {
                dataTable.ajax.reload(null, false);
            }

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

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

                const range = validateSearchRanges(31);

                if (!range.ok) {
                    showDateError(range.message);
                    return;
                }

                showDateError('');
                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-secondary">{{ __('expired') }}</span>') {
                    $(row).css('color', '#6c757d');
                } 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 ? 30 : data.countdown_time_minutes) +
                            '"></span>'
                        );
                    }
                }

                updateCountdownTimers();
            }

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

                const range = validateSearchRanges(31);

                if (!range.ok) {
                    showDateError(range.message);
                    hideFullPageLoading();
                    return;
                }

                showDateError('');

                const f = $('#search-cashin');

                const data = {
                    partner: f.find('[name="partner"]').val(),
                    from_create_date: f.find('[name="from_create_date"]').val(),
                    to_create_date: f.find('[name="to_create_date"]').val(),
                    from_complete_date: f.find('[name="from_complete_date"]').val(),
                    to_complete_date: f.find('[name="to_complete_date"]').val(),
                    bank_type: f.find('[name="bank_type"]').val(),
                    status: f.find('[name="status"]').val(),
                    account: f.find('[name="account"]').val(),
                    amount_from: f.find('[name="amount_from"]').val(),
                    amount_to: f.find('[name="amount_to"]').val(),
                    operation_type: f.find('[name="operation_type"]').val(),
                    gate: f.find('[name="gate"]').val()
                };

                showDateError('');

                $.ajax({
                    url: '{{ route('app.cashin.reportCashInByType') }}',
                    type: 'GET',
                    data: data,
                    success: function(response) {
                        hideFullPageLoading();

                        console.log('reportCashInByType success:', response);

                        const totalByBankType = response.totals_by_bank_type || [];
                        const totalAllAmount = response.total_all_amount || 0;
                        const totalAllBalance = response.total_all_balance || 0;

                        let html = '';

                        if (totalByBankType.length > 0) {
                            $.each(totalByBankType, function(_, item) {
                                html += `
                        <tr>
                            <td>${item.display_name || ''}</td>
                            <td>${numberFormat(item.total_amount_transfer || 0)}</td>
                            <td>${numberFormat(item.total_balance || 0)}</td>
                        </tr>
                    `;
                            });
                        } else {
                            html += `
                    <tr>
                        <td colspan="3" class="text-center text-muted">${ {{ \Illuminate\Support\Js::from(__('Không có dữ liệu')) }} }</td>
                    </tr>
                `;
                        }

                        html += `
                <tr style="background-color: #1fce04; font-weight: 700;">
                    <td>{{ __('total') }}</td>
                    <td>${numberFormat(totalAllAmount)}</td>
                    <td>${numberFormat(totalAllBalance)}</td>
                </tr>
            `;

                        $('#total-per-bank').html(html);
                        $('#cashinTotalModal').modal('show');
                    },
                    error: function(xhr) {
                        hideFullPageLoading();
                        console.log('reportCashInByType error:', xhr.responseJSON || xhr
                            .responseText);
                        toastr.error(xhr.responseJSON?.message ||
                            {{ \Illuminate\Support\Js::from(__('Đã 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({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi khi thống kê dữ liệu.')) }});
                    }
                });
            });
        });
    </script>

    <script>
        $(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({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                }
            });
        });
    </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) {
                    $('#updateForm #cashin_id').val(response.cashin.cash_in_id);
                    $('#updateForm #request_id').val(response.cashin.request_id);
                    $('#updateForm #code').val(response.cashin.code);
                    $('#updateForm #partner').val(response.partner);
                    $('#updateForm #account-no').val(response.account_no);
                    $('#updateForm #amount_transfer').val(formatThousandsVN(response.cashin
                        .amount_transfer, '.'));
                    $('#updateForm #amount').val(numberFormat(response.cashin.amount));
                    $('#updateForm #balance').val(numberFormat(response.cashin.balance));
                    $('#updateForm #fee').val(response.cashin.fee);
                    $('#updateForm #transaction_id').val(response.cashin.transaction_id);
                    $('#updateForm #note').val(response.cashin.note);
                    $('#updateForm #status').val(response.cashin.status);
                    $('#updateForm #disabled_status').val(response.cashin.status);

                    $('#updateForm #status').prop('disabled', false);

                    if (response.cashin.status === 1) {
                        $('#updateForm #status').prop('disabled', true);
                    } else if (response.cashin.status === 0) {
                        $('#updateForm #error').prop('selected', true);
                    } else if (response.cashin.status === 3) {
                        $('#updateForm #pending').prop('selected', true);
                    }
                },
                error: function(error) {
                    console.error('Lỗi lấy thông tin cashin:', error);
                    toastr.error({{ \Illuminate\Support\Js::from(__('Không lấy được thông tin cashin')) }});
                }
            });
        });

        var isConfirmed = false;

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

        document.getElementById('copyButton').addEventListener('click', function(event) {
            event.preventDefault();
            $('#updateForm #amount_transfer').val(formatThousandsVN($('#updateForm #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();

            const amountTransferInput = document.getElementById('amount_transfer');
            const oldDisplayValue = amountTransferInput.value;
            const amountTransfer = parseFormattedNumber(oldDisplayValue);

            if (!transactionId || isConfirmed) {
                amountTransferInput.value = amountTransfer;

                $.ajax({
                    url: '/cashin/' + cashin_id,
                    type: 'PUT',
                    data: $('#updateForm').serialize(),
                    dataType: 'json',
                    success: function(data) {
                        if (data.code == 1) {
                            hideEditOffcanvas();
                            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({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                    },
                    complete: function() {
                        amountTransferInput.value = oldDisplayValue;
                    }
                });

                return;
            }

            Swal.fire({
                title: {{ \Illuminate\Support\Js::from(__('Xác nhận lưu đơn hàng?')) }},
                html: {{ \Illuminate\Support\Js::from(__('Bạn có chắc chắn muốn lưu đơn hàng này không?')) }} + "<br>" + {{ \Illuminate\Support\Js::from(__('Thực chuyển:')) }} + " " +
                    "<span class='badge bg-danger'>" + numberFormat(amountTransfer) + "</span>" +
                    " - " + {{ \Illuminate\Support\Js::from(__('Mã giao dịch:')) }} + " " +
                    "<span class='badge bg-danger'>" + document.getElementById('transaction_id').value +
                    "</span>",
                icon: "question",
                showCancelButton: true,
                confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý')) }},
                cancelButtonText: {{ \Illuminate\Support\Js::from(__('Hủy')) }}
            }).then((result) => {
                if (result.isConfirmed) {
                    isConfirmed = true;
                    amountTransferInput.value = amountTransfer;

                    $.ajax({
                        url: '/cashin/' + cashin_id,
                        type: 'PUT',
                        data: $('#updateForm').serialize(),
                        dataType: 'json',
                        success: function(data) {
                            if (data.code == 1) {
                                hideEditOffcanvas();
                                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({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                        },
                        complete: function() {
                            isConfirmed = false;
                            amountTransferInput.value = oldDisplayValue;
                        }
                    });
                }
            });
        }
    </script>

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

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

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

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

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

                const params = new URLSearchParams();

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

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

                        const total = Number(stats.total_success || 0);
                        const lt3 = Number(stats.lt_3m || 0);
                        const m3_5 = Number(stats.from_3_to_5m || 0);
                        const m5_10 = Number(stats.from_5_to_10m || 0);
                        const gt10 = Number(stats.gt_10m || 0);
                        const avgSeconds = Number(stats.avg_seconds || 0);

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

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

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

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

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

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

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

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

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

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

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

@section('styles')
    <link rel="stylesheet" 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="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <style>
        tfoot {
            display: table-header-group;
        }

        .input-group-create-time .form-control {
            min-width: 160px;
        }

        .input-group-create-time .input-group-text {
            white-space: nowrap;
        }

        @media (max-width: 992px) {
            .input-group-create-time {
                flex-wrap: wrap;
            }

            .input-group-create-time .form-control {
                min-width: 100%;
            }

            .input-group-create-time .input-group-prepend,
            .input-group-create-time .input-group-append {
                width: auto;
            }
        }

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

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

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

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

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

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

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

        /* Desktop / màn to: giữ 1 hàng */
        @media (min-width: 993px) {
            .input-group {
                flex-wrap: nowrap !important;
            }
        }

        /* Mobile / tablet: cho phép xuống dòng để không tràn */
        @media (max-width: 992px) {
            .input-group {
                flex-wrap: wrap !important;
            }

            /* input/select trong input-group chiếm full width khi xuống dòng */
            .input-group>.form-control,
            .input-group>.custom-select,
            .input-group>.select2-container {
                flex: 1 1 100% !important;
                width: 100% !important;
                min-width: 0 !important;
            }

            /* các prepend/append cũng cho wrap hợp lý */
            .input-group-prepend,
            .input-group-append {
                flex: 0 0 auto !important;
            }

            /* Select2: full width khi wrap */
            .input-group>.select2-container {
                width: 100% !important;
            }
        }

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

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

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

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

        /* ===== Time group: desktop vẫn 1 hàng, mobile xuống dạng 2 dòng rõ ràng ===== */
        @media (max-width: 992px) {

            #createTimeGroup,
            #completeTimeGroup {
                display: grid;
                grid-template-columns: 1fr;
                /* 1 cột */
                gap: 8px;
            }

            #createTimeGroup .input-group-prepend,
            #completeTimeGroup .input-group-prepend {
                width: 100%;
            }

            #createTimeGroup .input-group-text,
            #completeTimeGroup .input-group-text {
                width: 100%;
                justify-content: flex-start;
                border-radius: 10px;
            }

            #createTimeGroup input.form-control,
            #completeTimeGroup input.form-control {
                width: 100%;
                border-radius: 10px;
            }
        }

        @media (max-width: 992px) {

            #search-cashin .col-lg-2,
            #search-cashin .col-lg-4 {
                margin-bottom: 6px;
            }

            #search-cashin .btn {
                width: 100%;
                margin-bottom: 8px;
            }
        }
    </style>
@endsection