@extends('layouts.app')

@section('title')
    {{ __('Đơn USDT') }}
@endsection

@section('usdt_order')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Đơn nạp USDT') }}</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">{{ __('Đơn Nạp USDT') }}</li>
                    </ol>
                </div>
            </div>
            <hr>
        </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>

            {{-- FILTER (giống transaction) --}}
            <div class="card-body filter-wrap">
                <form class="row g-3 align-items-end" id="search-order-usdt">
                    @csrf

                    {{-- Partner --}}
                    @role('admin|support')
                        <div class="col-12 col-md-6 col-lg-2">
                            <label class="form-label fw-semibold mb-1">{{ __('partner') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <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>
                    @endrole

                    @role('accountant')
                        <div class="col-12 col-md-6 col-lg-2">
                            <label class="form-label fw-semibold mb-1">{{ __('partner') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <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>
                    @endrole

                    {{-- Status --}}
                    <div class="col-12 col-md-6 col-lg-2">
                        <label class="form-label fw-semibold mb-1">{{ __('status') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-flag"></i></span>
                            <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>

                    {{-- Wallet address --}}
                    <div class="col-12 col-md-6 col-lg-3">
                        <label class="form-label fw-semibold mb-1">{{ __('Địa chỉ ví') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-wallet"></i></span>
                            <input type="text" class="form-control" name="address" autocomplete="off"
                                placeholder="{{ __('Địa chỉ ví') }}">
                        </div>
                    </div>

                    {{-- Request ID --}}
                    <div class="col-12 col-md-6 col-lg-3">
                        <label class="form-label fw-semibold mb-1">{{ __('request_id') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-fingerprint"></i></span>
                            <input type="text" class="form-control" name="request_id" autocomplete="off"
                                placeholder="{{ __('request_id') }}">
                        </div>
                    </div>

                    {{-- Transaction ID --}}
                    <div class="col-12 col-md-6 col-lg-2">
                        <label class="form-label fw-semibold mb-1">{{ __('transaction_id') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                            <input type="text" class="form-control" name="transaction_id" autocomplete="off"
                                placeholder="Mã GD">
                        </div>
                    </div>

                    {{-- Create time range --}}
                    <div class="col-12 col-lg-5">
                        <label class="form-label fw-semibold mb-1">{{ __('create_time') }}</label>
                        <div class="time-range">
                            <div class="input-group">
                                <span class="input-group-text"><i class="far fa-clock"></i></span>
                                <span class="input-group-text">{{ __('Từ') }}</span>
                                <input type="text" class="form-control" name="from_create_date" id="from_create_date"
                                    autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">
                            </div>

                            <div class="input-group">
                                <span class="input-group-text d-none d-lg-inline-flex"><i class="far fa-clock"></i></span>
                                <span class="input-group-text">{{ __('Đến') }}</span>
                                <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>

                    {{-- Complete time range --}}
                    <div class="col-12 col-lg-5">
                        <label class="form-label fw-semibold mb-1">{{ __('complete_time') }}</label>
                        <div class="time-range">
                            <div class="input-group">
                                <span class="input-group-text"><i class="far fa-check-circle"></i></span>
                                <span class="input-group-text">{{ __('Từ') }}</span>
                                <input type="text" class="form-control" name="from_complete_date"
                                    id="from_complete_date" autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">
                            </div>

                            <div class="input-group">
                                <span class="input-group-text d-none d-lg-inline-flex"><i
                                        class="far fa-check-circle"></i></span>
                                <span class="input-group-text">{{ __('Đến') }}</span>
                                <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>

                    {{-- Actions --}}
                    <div class="col-12 col-lg-2 d-flex gap-2 filter-actions">
                        <button type="button" class="btn btn-primary flex-grow-1" id="btn-search">
                            <i class="fa fa-search me-1"></i>{{ __('search') }}
                        </button>

                        <button type="button" class="btn btn-outline-primary flex-grow-1" id="btn-total-order-usdt">
                            <i class="fas fa-chart-pie me-1"></i>{{ __('report') }}
                        </button>
                    </div>

                    <div class="col-12">
                        <div id="date-error" class="text-danger small"></div>
                    </div>
                </form>
            </div>
        </div>

        {{-- LIST --}}
        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
                <div>
                    <h3 class="card-title mb-0">{{ __('transaction_list') }}</h3>
                </div>
                <div class="d-flex gap-2">
                    <a class="btn btn-secondary btn-sm" href="{{ route('app.usdt_histories.index') }}">
                        <i class="fa-solid fa-history me-1"></i>{{ __('Lịch sử USDT') }}
                    </a>
                    <a class="btn btn-success btn-sm" id="export-order-usdt" href="javascript:void(0)">
                        <i class="fa-solid fa-file-excel me-1"></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="listOrderUsdts">
                        <thead style="text-align: center;  background-color: #b6b9b6">
                            <tr>
                                <th>{{ __('request_id') }}</th>
                                <th>{{ __('partner') }}</th>
                                <th>{{ __('transaction_type') }}</th>
                                <th>{{ __('Địa chỉ ví') }}</th>
                                <th>{{ __('Tiền yêu cầu') }}</th>
                                <th>{{ __('amount_transferred') }}</th>
                                <th>{{ __('Tiền quy đổi(USDT)') }}</th>
                                <th>{{ __('fee') }}</th>
                                <th>{{ __('balance') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('create_time-complete_time') }}</th>
                                <th>{{ __('Hash') }}</th>
                                <th>{{ __('note') }}</th>
                                <th>{{ __('Xử lí bởi') }}</th>
                                <th>{{ __('Cổng xử lí') }}</th>
                                <th>{{ __('Callback') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- MODALS/OFFCANVAS: giữ nguyên của bạn --}}
            <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>
                            <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 đơn') }}</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <hr>
                <div class="offcanvas-body">
                    {{-- giữ nguyên form update của bạn --}}
                    <form class="row" method="POST" id="updateOrderUSDTForm">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="id" id="order_id">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="request-id">{{ __('request_id') }}</label>
                                    <input type="text" class="form-control" id="request_id" 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="address">{{ __('Địa chỉ ví') }}</label>
                                    <input type="text" class="form-control" id="address" 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="row">
                                <div class="form-group col-lg-6">
                                    <label for="status">{{ __('status') }}</label>
                                    <select name="status" id="status" class="form-control">
                                        <option value="0" id="error">{{ __('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 class="form-group col-lg-6">
                                    <label for="amount-usdt">{{ __('Tiền quy đổi(USDT)') }}</label>
                                    <input type="text" class="form-control" id="amount_usdt" name="amount_usdt"
                                        disabled>
                                </div>
                            </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="saveOrderUSDTButton" class="btn btn-success">
                                    <i class="fas fa-save"></i> {{ __('Lưu') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- REPORT MODAL --}}
        <div class="modal fade" id="usdtOrderTotalModal" tabindex="-1" aria-labelledby="usdtOrderTotalModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-center" id="usdtOrderTotalModalLabel">
                            {{ __('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>{{ __('Tổng USDT thành công') }}</td>
                                            <td><span id="totalAmountUsdt"></span></td>
                                        </tr>
                                        <tr style="background-color: #55da5c">
                                            <td>{{ __('Tổng VNĐ thành công') }}</td>
                                            <td><span id="totalAmountVnd"></span></td>
                                        </tr>
                                        <tr>
                                            <td>{{ __('Tổng số dư thành công') }}</td>
                                            <td><span id="totalAllBalance"></span></td>
                                        </tr>
                                        <tr style="background-color: #55da5c">
                                            <td>{{ __('Tổng giao dịch thành công') }}</td>
                                            <td><span id="totalTransactions"></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>
    </section>
@endsection

@section('scripts')
    <!-- DataTables  & Plugins -->
    <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="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>
        // ===== datetime helpers giống transaction =====
        const FORMAT = 'DD-MM-YYYY HH:mm:ss';

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

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

        /**
         * 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.
         *
         * Trả về chuỗi lỗi, hoặc chuỗi rỗng nếu hợp lệ.
         */
        function validateSearchRanges(maxDays) {
            const pairs = [{
                from: '#from_create_date',
                to: '#to_create_date',
                label: {{ \Illuminate\Support\Js::from(__('Thời gian tạo')) }}
            }, {
                from: '#from_complete_date',
                to: '#to_complete_date',
                label: {{ \Illuminate\Support\Js::from(__('Thời gian hoàn thành')) }}
            }];

            let filled = 0;

            for (const pair of pairs) {
                const fromStr = ($(pair.from).val() || '').trim();
                const toStr = ($(pair.to).val() || '').trim();

                if (!fromStr && !toStr) {
                    continue;
                }

                const from = parseDmyHis(fromStr);
                const to = parseDmyHis(toStr);

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

                if (from > to) {
                    return {{ \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', pair.label);
                }

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

                filled++;
            }

            if (!filled) {
                return {{ \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 '';
        }

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

        $(function() {
            // default hôm nay
            const startToday = moment().startOf('day');
            const endToday = moment().endOf('day').set({
                millisecond: 0
            });

            // Create time
            $('#from_create_date').datetimepicker({
                format: FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                allowInputToggle: true
            });
            $('#to_create_date').datetimepicker({
                format: FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                useCurrent: false,
                allowInputToggle: true
            });

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

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

            // 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ũ). Khoảng thời gian không hợp lệ sẽ chỉ trả về rỗng.

            // Complete time (default rỗng)
            $('#from_complete_date').datetimepicker({
                format: FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                allowInputToggle: true,
                useCurrent: false
            });
            $('#to_complete_date').datetimepicker({
                format: FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                allowInputToggle: true,
                useCurrent: false
            });

            // Không ràng buộc min/max chéo giữa 2 ô thời gian hoàn thành.

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

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

        function numberFormat(number) {
            return new Intl.NumberFormat('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(number);
        }

        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 formatMMSS(sec) {
            var m = Math.floor(sec / 60),
                s = sec % 60;
            return (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
        }

        jQuery(document).ready(function($) {
            dataTable = $('#listOrderUsdts').DataTable({
                dom: 'lfirtp',
                processing: true,
                serverSide: true,
                pageLength: 50,
                pagingType: 'input',
                aLengthMenu: [
                    [50, 100, 200],
                    [50, 100, 200]
                ],
                ajax: {
                    url: "{{ route('app.usdt_order.index') }}",
                    type: 'GET',
                    data: function(d) {
                        d.partner = $('#search-order-usdt [name="partner"]').val();
                        d.status = $('#search-order-usdt [name="status"]').val();
                        d.from_create_date = $('#search-order-usdt [name="from_create_date"]').val();
                        d.to_create_date = $('#search-order-usdt [name="to_create_date"]').val();
                        d.from_complete_date = $('#search-order-usdt [name="from_complete_date"]')
                    .val();
                        d.to_complete_date = $('#search-order-usdt [name="to_complete_date"]').val();
                        d.address = $('#search-order-usdt [name="address"]').val();
                        d.request_id = $('#search-order-usdt [name="request_id"]').val();
                        d.transaction_id = $('#search-order-usdt [name="transaction_id"]').val();
                    },
                    error: function(xhr, status, error) {
                        if (status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                columns: [{
                        data: 'request_id',
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'user_id',
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'type',
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: 'wallet_address_id',
                        className: 'text-center'
                    },
                    {
                        data: 'amount',
                        render: (data) => numberFormat(data),
                        className: 'text-right',
                    },
                    {
                        data: 'amount_transfer',
                        render: (data) => numberFormat(data),
                        className: 'text-right',
                    },
                    {
                        data: 'amount_usdt',
                        className: 'text-right',
                        render: (data) => parseFloat(data).toFixed(2)
                    },
                    {
                        data: 'fee',
                        render: function(data, type, row) {
                            if (type === 'display') return data + '%';
                            return data;
                        },
                        className: 'text-right',
                        orderable: false
                    },
                    {
                        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',
                        orderable: false
                    },
                    {
                        data: null,
                        name: 'created_at',
                        render: function(data) {
                            var createdTime = formatTime(data.created_at);

                            if (data.status == '<span class="badge bg-secondary">{{ __('expired') }}</span>') {
                                return createdTime +
                                    '<br><span class="badge bg-danger">{{ __('expired') }}</span>';
                            }
                            if (data.status == '<span class="badge bg-success">{{ __('success') }}</span>') {
                                var completedTime = formatTime(data.completed_at);
                                return createdTime + '<br>' + completedTime;
                            }

                            var raw = data.countdown_time;
                            if (raw == null || raw === '') return createdTime;

                            var target = (typeof raw === 'number' || /^\d+$/.test(String(raw))) ?
                                moment.unix(parseInt(raw, 10)) :
                                moment(raw);

                            var remaining = Math.max(0, target.diff(moment(), 'seconds'));

                            var html = remaining === 0 ?
                                '<span class="badge bg-danger">Expired</span>' :
                                '<span class="badge bg-warning text-dark countdown-timer" data-deadline="' +
                                target.unix() + '">' + formatMMSS(remaining) + '</span>';

                            return createdTime + '<br>' + html;
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'transaction_id',
                    },
                    {
                        data: 'note',
                        visible: userRole
                    },
                    {
                        data: 'handler',
                        visible: userRole,
                        orderable: false
                    },
                    {
                        data: 'gate',
                        visible: userRole,
                        orderable: false
                    },
                    {
                        data: 'is_callback',
                        render: function(data, type, row) {
                            if (data === 1)
                            return '<span class="badge bg-primary">' + {{ \Illuminate\Support\Js::from(__('Đã callback')) }} + '</span>';
                            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, type, row) {
                            return data.actions;
                        },
                        searchable: false,
                        visible: userRole ? true : false
                    },
                ],
                order: [
                    [10, 'desc']
                ],
            });

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

            // Search click: validate 2 khoảng thời gian <=31 ngày
            $(document).on('click', '#btn-search', function(event) {
                event.preventDefault();

                const dateError = validateSearchRanges(31);

                if (dateError) {
                    $('#date-error').text(dateError);
                    return;
                }

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

            // Report
            $('#btn-total-order-usdt').click(function(e) {
                e.preventDefault();

                const dateError = validateSearchRanges(31);

                if (dateError) {
                    $('#date-error').text(dateError);
                    return;
                }

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

                $.ajax({
                    url: '{{ route('app.usdt_order.reportUsdtOrder') }}',
                    type: 'GET',
                    data: {
                        from_create_date: $('#search-order-usdt [name="from_create_date"]').val(),
                        to_create_date: $('#search-order-usdt [name="to_create_date"]').val(),
                        from_complete_date: $('#search-order-usdt [name="from_complete_date"]')
                        .val(),
                        to_complete_date: $('#search-order-usdt [name="to_complete_date"]').val(),
                        partner: $('#search-order-usdt [name="partner"]').val(),
                        status: $('#search-order-usdt [name="status"]').val(),
                        request_id: $('#search-order-usdt [name="request_id"]').val(),
                        transaction_id: $('#search-order-usdt [name="transaction_id"]').val(),
                    },
                    success: function(response) {
                        $('#loading-overlay').addClass('d-none');

                        $('#totalAmountUsdt').text(numberFormat(response
                            .totalAmountUsdtSuccess));
                        $('#totalAmountVnd').text(numberFormat(response.totalAmountVndSuccess));
                        $('#totalAllBalance').text(numberFormat(response
                            .totalAllBalanceSuccess));
                        $('#totalTransactions').text(response.totalTransactionsSuccess);
                        $('#usdtOrderTotalModal').modal('show');
                    },
                    error: function() {
                        $('#loading-overlay').addClass('d-none');
                        toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi khi lấy dữ liệu tổng usdt.')) }});
                    }
                });
            });

            $('#export-order-usdt').click(function(e) {
                const dateError = validateSearchRanges(31);

                if (dateError) {
                    $('#date-error').text(dateError);
                    return;
                }

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

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

        // countdown tick (giữ nguyên)
        if (!window.__usdtCountdownTick) {
            window.__usdtCountdownTick = setInterval(function() {
                var now = moment();
                document.querySelectorAll('.countdown-timer').forEach(function(el) {
                    var dl = parseInt(el.getAttribute('data-deadline'), 10);
                    if (!Number.isFinite(dl)) return;

                    var remaining = Math.max(0, moment.unix(dl).diff(now, 'seconds'));
                    if (remaining === 0) {
                        el.outerHTML = '<span class="badge bg-danger">Expired</span>';
                    } else {
                        el.textContent = formatMMSS(remaining);
                    }
                });
            }, 1000);
        }

        // select2
    </script>

    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#partner').select2({
                width: '100%',
                placeholder: "{{ __('select') }}",
                allowClear: true
            });
        });
    </script>

    {{-- phần edit/update + recallBack + Swal giữ nguyên của bạn: nếu muốn mình gộp luôn cho sạch file thì nói --}}
@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="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">

    <link rel="stylesheet" href="{{ asset('dist/css/cashin/cashin.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">

    <style>
        /* ===== Filter area (giống transaction) ===== */
        .filter-wrap {
            background: linear-gradient(135deg, #eef6ee 0%, #e6f0e6 100%);
            border-radius: 14px;
            padding: 16px 16px 10px 16px;
            border: 1px solid rgba(0, 0, 0, .06);
        }

        .filter-wrap .form-label {
            color: #2d3a2d;
            font-size: 13px;
        }

        .time-range {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        @media (max-width: 991.98px) {
            .time-range {
                grid-template-columns: 1fr;
            }

            .filter-actions {
                flex-direction: column;
            }
        }

        .filter-wrap .input-group-text {
            background: #ffffff;
            border-color: rgba(0, 0, 0, .12);
            color: #3b4a3b;
        }

        .filter-wrap .form-control {
            border-color: rgba(0, 0, 0, .12);
            border-radius: 10px;
            box-shadow: none !important;
            height: 40px;
        }

        .filter-wrap .input-group .form-control {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .filter-wrap .input-group .input-group-text:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .filter-actions .btn {
            height: 40px;
            border-radius: 10px;
            font-weight: 600;
            white-space: nowrap;
        }

        /* ===== Datatable ===== */
        #listOrderUsdts thead th {
            background: #f2f4f7 !important;
            color: #263238;
            border-bottom: 1px solid rgba(0, 0, 0, .1);
            vertical-align: middle;
            text-align: center;
            white-space: nowrap;
        }

        #listOrderUsdts tbody td {
            vertical-align: middle;
            white-space: nowrap;
            max-width: 280px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-responsive {
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, .06);
            overflow: hidden;
        }

        /* ===== Select2 tune ===== */
        .input-group {
            flex-wrap: nowrap !important;
        }

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

        .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 {
            display: flex !important;
            align-items: center !important;
        }

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

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !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;
        }

        /* loadingOverlay cũ giữ lại */
        #loadingOverlay {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        .loading-spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid #ffffff;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endsection