@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 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 USDT') }}</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-order-usdt">
                    @csrf
                    @role('admin|support')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('partner') }}</span>
                                    </div>
                                    <select name="partner" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getPartners() as $partner)
                                            <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    @role('accountant')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('partner') }}</span>
                                    </div>
                                    <select name="partner" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getPartnerAccountantCanView() as $partner)
                                            <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('status') }}</span>
                                </div>
                                <select name="status" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="0">Lỗi</option>
                                    <option value="3">Chờ tiền</option>
                                    <option value="1">Thành công</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Địa chỉ ví') }}</span>
                                </div>
                                <input type="text" class="form-control" name="address"
                                    placeholder="{{ __('Địa chỉ ví') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('create_time') }}</span>
                                </div>
                                <input type="datetime-local" class="form-control" name="from_create_date"
                                    id="from_create_date" value="{{ now()->format('Y-m-d') }}T00:00">
                                <input type="datetime-local" class="form-control" name="to_create_date" id="to_create_date"
                                    value="{{ now()->format('Y-m-d', strtotime('+1 day')) }}T23:59:59">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('complete_time') }}</span>
                                </div>
                                <input type="datetime-local" class="form-control" name="from_complete_date"
                                    id="from_complete_date" value="">
                                <input type="datetime-local" class="form-control" name="to_complete_date"
                                    id="to_complete_date" value="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-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">{{ __('transaction_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="transaction_id" placeholder="Mã GD">
                            </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-order-usdt">{{ __('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">
                    <a class="btn btn-sm btn-secondary" id="export-order-usdt" href="javascript:void(0)"><i
                            class="fa-solid fa-file-excel"></i>{{ __('export_excel') }}</a>
                </div>
            </div>
            <div id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
            </div>
            @if (Session::has('success'))
                <div id="message-alert" class="alert alert-success">
                    {{ Session::get('success') }}
                </div>
            @endif
            @if (Session::has('error'))
                <div id="message-alert" class="alert alert-danger">
                    {{ Session::get('error') }}
                </div>
            @endif
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="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>{{ __('transaction_id') }}</th>
                                <th>{{ __('note') }}</th>
                                <th>{{ __('Xử lí bởi') }}</th>
                                <th>{{ __('Server') }}</th>
                                <th>{{ __('Callback') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="modal fade" id="transactionHistoryModal" tabindex="-1"
                aria-labelledby="transactionHistoryModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="transactionHistoryModalLabel">
                                {{ __('Truy vấn tài khoản') }} <span style="color: red">{{ __('Số dư: ') }}</span> <span
                                    id="data-account" style="color: red"></span></h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="card">
                            </div>
                            <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">
                    <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">Lỗi</option>
                                        <option value="1" id="success">Thành công</option>
                                        <option value="3" id="pending">Chờ tiền</option>
                                    </select>
                                    <input type="hidden" name="disabled_status" id="disabled_status">
                                </div>
                                <div 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="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="saveOrderUSDTButton" class="btn btn-success"><i
                                        class="fas fa-save"></i>
                                    {{ __('Lưu') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var amountInputs = document.querySelectorAll('.amount');

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

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

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

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


    <script>
        // $('#export-order-usdt').click(function(e) {
        //     e.preventDefault();
        //     var fromCreatedDate = document.getElementById('from_create_date').value;
        //     var toCreatedDate = document.getElementById('to_create_date').value;

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

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

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

        //     if (diffInDays > 30 || diffCompleteInDays > 30) {
        //         document.getElementById('date-error').textContent =
        //             'Khoảng thời gian không được lớn hơn 30 ngày.';
        //         return;
        //     }
        //     document.getElementById('date-error').textContent = '';
        //     $.ajax({
        //         type: 'POST',
        //         url: "{{ route('app.exportOrderUsdt') }}",
        //         data: $('#search-order-usdt').serialize(),
        //         dataType: 'JSON',
        //         success: function(response) {
        //             if (response.success) {
        //                 toastr.success(response.message);
        //                 setTimeout(function() {
        //                     window.open('/file-managers', '_blank');
        //                 }, 3000);
        //             }
        //         },
        //         error: function(error) {
        //             toastr.error(error);
        //         },
        //     });
        // });
    </script>

    <script>
        var dataTable;
        var userRole = "{{ checkRoleUser() }}";
        jQuery(document).ready(function($) {
            dataTable = $('#listOrderUsdts').DataTable({
                dom: 'lfirtp',
                processing: true,
                serverSide: true,
                'pageLength': 50,
                'pagingType': 'input',
                'aLengthMenu': [
                    [50, 100, 200, -1],
                    [50, 100, 200, 'All']
                ],
                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) => {
                            return numberFormat(data);
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'amount_transfer',
                        render: (data) => {
                            return numberFormat(data);
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'amount_usdt',
                        className: 'text-right',
                    },
                    {
                        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);
                            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: 'transaction_id',
                        visible: userRole
                    },
                    {
                        data: 'note',
                        visible: userRole
                    },
                    {
                        data: 'handler',
                        visible: userRole,
                        orderable: false
                    },
                    {
                        data: 'server_name',
                        visible: userRole,
                        orderable: false
                    },
                    {
                        data: 'is_callback',
                        render: function(data, type, row) {
                            if (data === 1) {
                                return '<span class="badge bg-primary">Đã callback</span>';
                            } else {
                                return '<span class="badge bg-secondary">Chưa callback</span>';
                            }
                        },
                        visible: userRole
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        className: 'text-center',
                        render: function(data, type, row) {
                            return data.actions;
                        },
                        searchable: false,
                        visible: userRole ? true : false
                    },
                ],
                rowCallback: rowCallback,
                order: [
                    [10, 'desc']
                ],
            });

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

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

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

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

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

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

            $(document).on('click', '.showTransactionHistoryUsdtBtn', function() {
                showLoadingOverlay();
                var walletId = $(this).data('wallet-address-id');
                var currentOffset = 0;
                var dataTable = $('#listUsdts').DataTable();
                initializeDataTable();

                function initializeDataTable() {
                    showLoadingOverlay();
                    currentOffset = 0;
                    if ($.fn.DataTable.isDataTable('#listUsdts')) {
                        dataTable.destroy();
                    }
                    fetchTransactionHistory(currentOffset, 20, null, null);
                }

                function fetchTransactionHistory(offset, limit, startDate, endDate) {
                    $.ajax({
                        url: 'transaction-history-usdt/' + walletId,
                        type: 'GET',
                        dataType: 'json',
                        data: {
                            offset: offset,
                            limit: limit
                        },
                        success: function(data) {
                            if (data.success) {
                                var transactions = data.data.transactions;
                                if (transactions == null || transactions.length == 0) {
                                    hideLoadingOverlay();
                                    toastr.error('Thất bại', 'Không có lịch sử giao dịch nào');
                                }
                                var content =
                                    '<table id="transactionDataTable" class="table table-bordered table-striped">';
                                content +=
                                    '<thead style="text-align: center"><tr><th>Mã giao dịch</th><th>Số tiền</th><th>Loại giao dịch</th><th>Thời gian</th><th>Trạng thái</th></tr></thead>';
                                content += '<tbody style="text-align: center">';
                                for (var i = 0; i < transactions.length; i++) {
                                    var transaction = transactions[i];
                                    content += '<tr>';
                                    content += '<td>' + transaction['id'] +
                                        '</td>';
                                    content += '<td>' + transaction['amount'] +
                                        '</td>';
                                    content += '<td>' + (transaction['io'] == 1 ?
                                            '<span class="badge bg-primary">Nhận tiền</span>' :
                                            '<span class="badge bg-secondary">Chuyển tiền</span>'
                                        ) +
                                        '</td>';
                                    content += '<td>' + formatTimeHistory(transaction[
                                            'insertTime']/1000) +
                                        '</td>';
                                    content += '<td>' + (transaction['status'] == 0 ?
                                            '<span class="badge bg-danger">Lỗi</span>' :
                                            '<span class="badge bg-success">Thành công</span>'
                                        ) +
                                        '</td>';
                                }
                                content += '</tbody>';
                                content += '</table>';
                                $('#transactionHistoryContent').empty();
                                document.getElementById('transactionHistoryContent').innerHTML =
                                    content;
                                $('#transactionHistoryModal').modal('show');
                                hideLoadingOverlay();
                                var transactionDataTable = $('#transactionDataTable')
                                    .DataTable({
                                        pageLength: limit,
                                        aLengthMenu: [
                                            [limit],
                                            [limit]
                                        ],
                                        order: [
                                            [3, 'desc']
                                        ],
                                    });
                            } else {
                                hideLoadingOverlay();
                                toastr.error(data.message);
                            }
                        },
                        error: function() {
                            hideLoadingOverlay();
                            toastr.error('Đã xảy ra lỗi khi lấy dữ liệu lịch sử giao dịch.');
                        }
                    });
                }
            });

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

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

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

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

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

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

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

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

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

        $(document).on('click', '.recallbackUsdtOrder', function() {
            var $form = $(this).closest('form');
            var dataTable = $('#listOrderUsdts').DataTable();
            var pageInfo = dataTable.page.info();
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: $form.serialize(),
                success: function(data) {
                    if (data.code == 1) {
                        dataTable.page(pageInfo.page).draw('page');
                        toastr.success(data.msg);
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('Đã xảy ra lỗi: ' + error);
                }
            });
        });

        function formatTime(isoTime) {
            try {
                const date = new Date(isoTime);
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const year = date.getFullYear();

                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            } catch (e) {}
            return null;
        }

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

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

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

        function formatTimeHistory(timestamp) {
            try {
                const date = new Date(timestamp * 1000);

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

                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            } catch (error) {
                return error.toString();
            }
        }
    </script>
    <script>
        $(document).on('click', '#edit-usdt-order', function() {
            const orderId = $(this).data('usdt-order-id');

            $.ajax({
                url: '/get-usdt-order-data/' + orderId,
                method: 'GET',
                success: function(response) {
                    $('#request_id').val(response.usdt_order.request_id);
                    $('#order_id').val(response.usdt_order.id);
                    $('#partner').val(response.usdt_order.user.username);
                    $('#address').val(response.wallet_address);
                    $('#amount_transfer').val(numberFormat(response.usdt_order.amount_transfer));
                    $('#amount').val(numberFormat(response.usdt_order.amount));
                    $('#balance').val(numberFormat(response.usdt_order.balance));
                    $('#fee').val(response.usdt_order.fee);
                    // $('#transaction_id').val(response.usdt_order.transaction_id);
                    $('#note').val(response.usdt_order.note);
                    $('#status').val(response.usdt_order.status);
                    $('#amount_usdt').val(response.usdt_order.amount_usdt);
                    if (response.usdt_order.status === 1) {
                        $('#status').prop('disabled', true);
                    } else if (response.usdt_order.status === 0) {
                        $('#error').prop('selected', true);
                        $('#status').prop('disabled', false);
                    } else if (response.usdt_order.status === 3) {
                        $('#pending').prop('selected', true);
                        $('#status').prop('disabled', false);
                    }
                },
                error: function(error) {
                    console.error('Lỗi lấy thông tin:', error);
                    toastr.error(error);
                }
            });
        });

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

        function saveData() {
            // var transactionId = document.getElementById('transaction_id').value;
            var order_id = document.getElementById('order_id').value;
            var dataTable = $('#listOrderUsdts').DataTable();
            var pageInfo = dataTable.page.info();
            // if (!transactionId || isConfirmed) {
            //     toastr.error('Trường mã giao dịch không được để trống!');
            // } else {
                var amountTransferStr = document.getElementById('amount_transfer').value;
                var amountTransfer = parseFloat(amountTransferStr.replace(/,/g, ''));
                Swal.fire({
                    title: "Xác nhận lưu đơn hàng?",
                    html: "Bạn có chắc chắn muốn lưu đơn hàng này không?<br>Thực chuyển: " +
                        "<span class='badge bg-danger'>" + numberFormat(amountTransfer) +
                        "</span>",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: "Đồng ý",
                    cancelButtonText: "Hủy"
                }).then((result) => {
                    if (result.isConfirmed) {
                        isConfirmed = true;
                        $.ajax({
                            url: '/usdt_order/' + order_id,
                            type: 'PUT',
                            data: $('#updateOrderUSDTForm').serialize(),
                            dataType: 'json',
                            success: function(data) {
                                if (data.code == 1) {
                                    $('#offcanvasRight').offcanvas('hide');
                                    dataTable.page(pageInfo.page).draw('page');
                                    toastr.success(data.msg);
                                } else {
                                    toastr.error(data.msg);
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log('Lỗi: ', error);
                                toastr.error('Đã xảy ra lỗi: ' + error);
                            },
                            complete: function() {
                                isConfirmed = false;
                            }
                        });
                    }
                });
            // }
        }

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

@section('styles')
    {{-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"> --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet" href="{{ asset('dist/css/cashin/cashin.css') }}">
    <style>
        tfoot {
            display: table-header-group;
        }
    </style>
@endsection