@extends('layouts.app')

@section('title')
    {{ __('Ví USDT') }}
@endsection

@section('usdt')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Ví 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">{{ __('Ví 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">Đang tính toán, vui lòng chờ...</div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('list') }}</h3>
                <div class="card-tools">
                    <button class="btn btn-sm btn-danger d-none" id="turnOffUsdt">
                            {{ __('Turn off')}}
                        </button>
                        <button class="btn btn-sm btn-success d-none" id="turnOnUsdt">
                            {{__('Turn on')}}
                        </button>
                    <a href="{{ route('app.usdt.create') }}" class="btn btn-primary btn-sm"
                        title="{{ __('Thêm địa chỉ ví USDT') }}">
                        <i class="fas fa-add"></i>
                        <span>{{ __('Thêm ví') }}</span>
                    </a>
                    {{-- <a class="btn btn-sm btn-secondary" id="export-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>
            <div class="card-body">
                @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="table-responsive">
                    <table id="listUsdts" class="table table-bordered table-striped">
                        <thead style="text-align:center; background-color: rgb(236, 236, 246)">
                            <tr>
                                <th><input type="checkbox" name="main_checkbox" class="wide-checkbox"><label></label></th>
                                <th>{{ __('ID') }}</th>
                                <th>{{ __('Loại') }}</th>
                                <th>{{ __('Mạng') }}</th>
                                <th>{{ __('Địa chỉ ví') }}</th>
                                <th>{{ __('Trạng thái') }}</th>
                                <th>{{ __('Tình trạng') }}</th>
                                <th>{{ __('Thời gian tạo') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                    </table>
                </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 Ví USDT</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <hr>
            <div class="offcanvas-body">
                <form class="row" method="POST" id="updateForm">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="wallet_id" id="wallet_id">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="bank">{{ __('Loại') }}</label>
                            <input type="text" class="form-control" id="asset" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="network">{{ __('Mạng') }}</label>
                            <input type="text" class="form-control" id="network" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="address">{{ __('Địa chỉ ví') }}</label>
                            <input type="text" class="form-control" id="address" name="address">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                                <label for="state">{{ __('Tình trạng') }}</label>
                                <select name="state" id="state" class="form-control">
                                    <option value="0" id="not_use">Tắt</option>
                                    <option value="1" id="using">Bật</option>
                                </select>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="text-center">
                            <button type="submit" id="saveButton" class="btn btn-success"><i class="fas fa-save"></i>
                                {{ __('Lưu') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal fade" id="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>
    </section>
@endsection

@section('scripts')
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script>
        jQuery(document).ready(function($) {
            var dataTables = $('#listUsdts').DataTable({
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                'pageLength': 20,
                'pagingType': 'input',
                'aLengthMenu': [
                    [20, 50, -1],
                    [20, 50, 'All']
                ],
                ajax: {
                    url: '{{ route('app.usdt.index') }}',
                    type: 'GET',
                    error: function(xhr, status, error) {
                        if (status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                columns: [
                    {
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        className: 'text-center wide-checkbox',
                        searchable: false,
                        defaultContent: ''
                    },
                    {
                        data: 'id',
                        className: 'text-center',
                    },
                    {
                        data: 'asset',
                        className: 'text-center',
                    },
                    {
                        data: 'network',
                        className: 'text-center',
                    },
                    {
                        data: 'address',
                        className: 'text-center',
                    },
                    {
                        data: 'status',
                        render: (data) => {
                            if (data === false) {
                                return `<span class="badge bg-primary">Chưa có đơn</span>`
                            } else {
                                return `<span class="badge bg-warning">Đang có đơn</span>`
                            }
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'state',
                        render: (data) => {
                            if (data === false) {
                                return `<span class="badge bg-danger">Đang tắt</span>`
                            } else {
                                return `<span class="badge bg-success">Đang bật</span>`
                            }
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'created_at',
                        className: 'text-center',
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        className: 'text-center',
                    }
                ],
                order: [
                    [1, 'asc']
                ],
            }).on('draw', function() {
                $('input[name="usdtCheckbox"]').each(function() {
                    this.checked = false;
                });
                $('input[name="main_checkbox"]').prop('checked', false);
                $('button#turnOffUsdt').addClass('d-none');
                $('button#turnOnUsdt').addClass('d-none');
            });;
        });

        $(document).on('click', '#edit-wallet', function() {
                const walletID = $(this).data('wallet-id');

                $.ajax({
                    url: '/get-wallet-data/' + walletID,
                    method: 'GET',
                    success: function(response) {
                        var walletAddress = response.walletAddress;
                        $('#asset').val(walletAddress.asset);
                        $('#network').val(walletAddress.network);
                        $('#address').val(walletAddress.address);
                        $('#wallet_id').val(walletAddress.id);
                        switch (walletAddress.state) {
                            case false:
                                $('#not_use').prop('selected', true);
                                break;
                            case true:
                                $('#using').prop('selected', true);
                                break;
                            default:
                                break;
                        }
                    },
                    error: function(error) {
                        console.error('Lỗi lấy thông tin:', error);
                        toastr.error(error);
                    }
                });
            });

        document.getElementById('saveButton').addEventListener('click', function(event) {
            event.preventDefault();
            saveData();
        });
        $(document).on('click', 'input[name="main_checkbox"]', function() {
                if (this.checked) {
                    $('input[name="usdtCheckbox"]').each(function() {
                        this.checked = true;
                    });
                } else {
                    $('input[name="usdtCheckbox"]').each(function() {
                        this.checked = false;
                    });
                }
                toggleTurnOffUsdt();
                toggleTurnOnUsdt();
            });

            $(document).on('change', 'input[name="usdtCheckbox"]', function() {
                if ($('input[name="usdtCheckbox"]').length == $(
                        'input[name="usdtCheckbox"]:checked').length) {
                    $('input[name="main_checkbox"]').prop('checked', true);
                } else {
                    $('input[name="main_checkbox"]').prop('checked', false);
                }
                toggleTurnOffUsdt();
                toggleTurnOnUsdt();
            });
            function toggleTurnOffUsdt() {
                if ($('input[name="usdtCheckbox"]:checked').length > 0) {
                    $('button#turnOffUsdt').text('Tắt (' + $(
                            'input[name="usdtCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#turnOffUsdt').addClass('d-none');
                }
            }

            function toggleTurnOnUsdt() {
                if ($('input[name="usdtCheckbox"]:checked').length > 0) {
                    $('button#turnOnUsdt').text('Bật (' + $(
                            'input[name="usdtCheckbox"]:checked')
                        .length + ')').removeClass('d-none');
                } else {
                    $('button#turnOnUsdt').addClass('d-none');
                }
            }
        $(document).on('click', '#turn-on-off-usdt', function() {
            var dataTable = $('#listUsdts').DataTable();
            var pageInfo = dataTable.page.info();
            event.preventDefault();
            const walletID = $(this).data('wallet-id');

                $.ajax({
                    url: '/turn-on-off-usdt/' + walletID,
                    method: 'GET',
                    success: function(response) {
                        if(response.code == 1) {
                            if(response.state) {
                             toastr.success('Bạn đã tắt ví usdt thành công');
                            }
                            else {
                             toastr.success('Bạn đã bật ví usdt thành công');
                            }
                            dataTable.page(pageInfo.page).draw('page');
                        }
                        else {
                            toastr.error(response.msg);
                        }

                    },
                    error: function(error) {
                        console.error('Lỗi lấy thông tin:', error);
                        toastr.error(error);
                    }
                });
        });

        $(document).on('click', 'button#turnOffUsdt', function() {
                var checkedUsdts = [];
                $('input[name="usdtCheckbox"]:checked').each(function() {
                    checkedUsdts.push($(this).data('id'));
                });

                if (checkedUsdts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: 'Xác nhận tắt ví usdt?',
                        html: 'Bạn có chắc muốn tắt <b>(' + checkedUsdts.length +
                            ')</b> ví usdt này không?',
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: 'Đồng ý, Tắt',
                        cancelButtonText: 'Huỷ',
                        confirmButtonColor: '#556ee6',
                        cancelButtonColor: '#d33',
                        allowOutsideClick: false,
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: '{{ route('app.usdt.turnOffUsdts') }}',
                                type: 'PUT',
                                data: {
                                    ids: checkedUsdts,
                                    _token: csrfToken
                                },
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code == 1) {
                                        $('#listUsdts').DataTable().ajax.reload(null,
                                            true);
                                        toastr.success(data.msg);
                                    } else {
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error(xhr.responseText);
                                    toastr.error('Có lỗi xảy ra, vui lòng thử lại');
                                }
                            });
                        }
                    })
                }
            });
        $(document).on('click', 'button#turnOnUsdt', function() {
                var checkedUsdts = [];
                $('input[name="usdtCheckbox"]:checked').each(function() {
                    checkedUsdts.push($(this).data('id'));
                });

                if (checkedUsdts.length > 0) {
                    var csrfToken = '{{ csrf_token() }}';
                    swal.fire({
                        title: 'Xác nhận bật ví usdt?',
                        html: 'Bạn có chắc muốn bật <b>(' + checkedUsdts.length +
                            ')</b> ví usdt này không?',
                        showCancelButton: true,
                        icon: "question",
                        showCloseButton: true,
                        confirmButtonText: 'Đồng ý, Tắt',
                        cancelButtonText: 'Huỷ',
                        confirmButtonColor: '#556ee6',
                        cancelButtonColor: '#d33',
                        allowOutsideClick: false,
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: '{{ route('app.usdt.turnOnUsdts') }}',
                                type: 'PUT',
                                data: {
                                    ids: checkedUsdts,
                                    _token: csrfToken
                                },
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code == 1) {
                                        $('#listUsdts').DataTable().ajax.reload(null,
                                            true);
                                        toastr.success(data.msg);
                                    } else {
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error(xhr.responseText);
                                    toastr.error('Có lỗi xảy ra, vui lòng thử lại');
                                }
                            });
                        }
                    })
                }
            });


        function saveData() {
            var wallet_id = document.getElementById('wallet_id').value;
            var dataTable = $('#listUsdts').DataTable();
            var pageInfo = dataTable.page.info();
            $.ajax({
                url: '/usdt/' + wallet_id,
                type: 'PUT',
                data: $('#updateForm').serialize(),
                dataType: 'json',
                success: function(data) {
                    if (data.code == 1) {
                        $('#offcanvasRight').offcanvas('hide');
                        dataTable.page(pageInfo.page).draw('page');
                        toastr.success(data.msg);
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('Đã xảy ra lỗi: ' + error);
                }
            });
        }

        $(document).on('click', '.showTransactionHistoryUsdtBtn', function() {
                showLoadingOverlay();
                var walletId = $(this).data('wallet-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();
            }



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

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

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <style>
        #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);
            }
        }

        #loading-overlay {
            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-overlay .spinner-border {
            width: 4rem;
            height: 4rem;
            margin-bottom: 10px;
        }

        #loading-overlay .loading-text {
            font-size: 18px;
            color: #fff;
        }

        .hidden {
            display: none;
        }

        .dataTables_wrapper .table td.text-right {
            text-align: right;
        }

        #transactionHistoryModal .modal-content {
            max-height: 80vh;
            overflow-y: auto;
        }

        #transactionHistoryModal .modal-dialog {
            margin: 0 auto;
            margin-top: 10vh;
            max-width: 90%;
        }

        #securityModal .modal-dialog {
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            margin-top: 10vh;
            max-width: 30%;
        }

        #securityModal .modal-content {
            text-align: center;
            overflow-y: auto;
        }

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

        input[type=checkbox] {
            width: 20px !important;
            height: 20px !important;
        }

        .offcanvas.show {
            width: 1000px;
            transform: translateX(0);
            /* Đẩy offcanvas về phải khi mở */
            height: 100%;
            /* Chiều cao 100% để nó mở rộng theo chiều dài của body */
        }

        .offcanvas-body {
            overflow-y: auto;
            /* Cho phép cuộn bên trong offcanvas-body nếu nó quá dài */
            height: 100%;
            /* 100% chiều cao để lấp đầy không gian */
        }

        .modal-lg {
            max-width: 80%;
            /* Điều chỉnh kích thước modal */
        }

        .modal-lg .modal-dialog {
            width: 100%;
            /* Điều chỉnh kích thước modal */
            margin: 0 auto;
            /* Canh giữa modal */
        }

        #qr-code-image {
            width: 30%;
        }

        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }

        #loading-overlay,
        #loading-overlay-add-balance-bank-account {
            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-overlay .spinner-border {
            width: 4rem;
            height: 4rem;
            margin-bottom: 10px;
        }

        #loading-overlay-add-balance-bank-account .spinner-border {
            width: 4rem;
            height: 4rem;
            margin-bottom: 10px;
        }

        #loading-overlay .loading-text {
            font-size: 18px;
            color: #fff;
        }

        #loading-overlay-add-balance-bank-account .loading-text {
            font-size: 18px;
            color: #fff;
        }
    </style>
@endsection