@extends('layouts.app')

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

@section('card')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Thẻ cào') }}</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">{{ __('Thẻ cào') }}</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 xử lí, vui lòng chờ...</div>
            </div>
            <div class="card-body" style="background-color: #9fb69f">
                <form class="row" id="search-card">
                    @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">{{ __('Loại thẻ') }}</span>
                                </div>
                                <select name="card_type" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="viettel">{{ __('Thẻ Viettel') }}</option>
                                    <option value="vinaphone">{{ __('Thẻ Vinaphone') }}</option>
                                    <option value="mobiphone">{{ __('Thẻ Mobiphone') }}</option>
                                    <option value="vietnamobile">{{ __('Thẻ Vietnamobile') }}</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">{{ __('status') }}</span>
                                </div>
                                <select name="status" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="pending">{{ __('Chờ xử lí') }}</option>
                                    <option value="fail">{{ __('Lỗi') }}</option>
                                    <option value="success">{{ __('Thành công') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Mệnh giá') }}</span>
                                </div>
                                <select name="card_value" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="10000">10.000 VND</option>
                                    <option value="20000">20.000 VND</option>
                                    <option value="50000">50.000 VND</option>
                                    <option value="100000">100.000 VND</option>
                                    <option value="200000">200.000 VND</option>
                                    <option value="500000">500.000 VND</option>
                                    <option value="1000000">1.000.000 VND</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    @role('admin|support')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('Loại xử lý') }}</span>
                                    </div>
                                    <select name="operation" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        <option value="manual">Thủ công</option>
                                        <option value="auto">Tự động</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('request_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="request_id"
                                    placeholder="{{ __('request_id') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Mã thẻ') }}</span>
                                </div>
                                <input type="text" class="form-control" name="card_no" placeholder="Nhập mã thẻ">
                            </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">{{ __('Serial thẻ') }}</span>
                                </div>
                                <input type="text" class="form-control" name="serial_no"
                                    placeholder="Nhập serial thẻ">
                            </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">
                        <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-card">{{ __('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">{{ __('list') }}</h3>
                <div class="card-tools">
                    <button id="refresh-btn" class="btn btn-info btn-sm" data-auto-refresh="false">
                        <i class="fa fa-refresh" aria-hidden="true"></i>
                        <span id="refresh-text">{{ __('Tự động làm mới: Tắt') }}</span>
                    </button>
                    <a class="btn btn-sm btn-secondary" id="export-card" 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="listCards">
                        <thead style="text-align: center;  background-color: #b6b9b6">
                            <tr>
                                <th>{{ __('order_id') }}</th>
                                <th>{{ __('request_id') }}</th>
                                <th>{{ __('partner') }}</th>
                                <th>{{ __('Loại thẻ') }}</th>
                                <th>{{ __('Mã thẻ') }}</th>
                                <th>{{ __('Serial thẻ') }}</th>
                                <th>{{ __('Mệnh giá gửi') }}</th>
                                <th>{{ __('Mệnh giá thực') }}</th>
                                <th>{{ __('fee') }}</th>
                                <th>{{ __('balance') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('create_time-complete_time') }}</th>
                                <th>{{ __('Phản hồi') }}</th>
                                <th>{{ __('Xử lí') }}</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>

            {{-- Modal --}}
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
                aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasRightLabel">Chỉnh sửa thẻ</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="card_id" id="card_id">
                        <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="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="card_no">{{ __('Mã thẻ') }}</label>
                                    <input type="text" class="form-control" id="card_no" disabled>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="serial_no">{{ __('Serial thẻ') }}</label>
                                    <input type="text" class="form-control" id="serial_no" disabled>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="card_value_real">{{ __('Mệnh giá thực') }}</label>
                                        <input type="text" class="form-control" id="card_value_real"
                                            name="card_value_real">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="amount">{{ __('Mệnh giá gửi') }}</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="card_value" name="card_value"
                                                disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <label for="balance">{{ __('balance') }}</label>
                                    <input type="text" class="form-control" id="balance" name="balance" disabled>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="fee">{{ __('fee') }}</label>
                                    <input type="number" class="form-control" id="fee" name="fee" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="status">{{ __('status') }}</label>
                                <select name="status" id="status" class="form-control">
                                    <option value="fail" id="error">Lỗi</option>
                                    <option value="success" id="success">Thành công</option>
                                    <option value="pending" id="pending">Chờ xử lí</option>
                                </select>
                                <input type="hidden" name="disabled_status" id="disabled_status">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="note">{{ __('Phản hồi') }}</label>
                                <textarea type="text" class="form-control" name="note" id="note"
                                    placeholder="{{ __('Nhập phản hồi') }}"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="text-center">
                                <button type="submit" id="saveButton" class="btn btn-success"><i
                                        class="fas fa-save"></i>
                                    {{ __('Lưu') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal fade" id="cardTotalModal" tabindex="-1" aria-labelledby="cardTotalModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-center" id="cardTotalModalLabel">
                                {{ __('report') }}</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead style="background-color: #abb7ac">
                                            <tr>
                                                <th>{{ __('CardType') }}</th>
                                                <th>{{ __('CardValueReal') }}</th>
                                                <th>{{ __('TotalBalance') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="total-per-card-type">
                                            <tr id="sample-row" class="d-none">
                                                <td class="card-type"></td>
                                                <td class="total-amount"></td>
                                                <td class="total-balance"></td>
                                            </tr>
                                            <tr id="total-all-amount" class="d-none" style="background-color: #1fce04">
                                                <td>{{ __('total') }}</td>
                                                <td class="total-all-amount"></td>
                                                <td class="total-all-balance"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ __('close') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @section('scripts')
        <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 src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
        <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
        </script>
        <script type="text/javascript"
            src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.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-card').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 > 3 || diffCompleteInDays > 3) {
                    document.getElementById('date-error').textContent =
                        'Khoảng thời gian không được lớn hơn 3 ngày.';
                    return;
                }
                document.getElementById('date-error').textContent = '';
                $.ajax({
                    type: 'POST',
                    url: "{{ route('app.exportCard') }}",
                    data: $('#search-card').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);
                    },
                });
            });

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

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

                var partner = $('#search-card [name="partner"]').val();
                var card_type = $('#search-card [name="card_type"]').val();
                var status = $('#search-card [name="status"]').val();
                var from_create_date = $('#search-card [name="from_create_date"]').val();
                var to_create_date = $('#search-card [name="to_create_date"]').val();
                var from_complete_date = $('#search-card [name="from_complete_date"]').val();
                var to_complete_date = $('#search-card [name="to_complete_date"]').val();
                var card_value = $('#search-card [name="card_value"]').val();
                var operation = $('#search-card [name="operation"]').val();
                var request_id = $('#search-card [name="request_id"]').val();
                var card_no = $('#search-card [name="card_no"]').val();
                var serial_no = $('#search-card [name="serial_no"]').val();

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

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

                if (diffInDays > 10 || diffCompleteInDays > 10) {
                    document.getElementById('date-error').textContent =
                        'Khoảng thời gian không được lớn hơn 10 ngày.';
                    $('#loading-overlay').addClass('d-none');
                    return;
                }
                document.getElementById('date-error').textContent = '';

                $.ajax({
                    url: "{{ route('app.card.reportCardByCardType') }}",
                    type: 'GET',
                    data: {
                        partner: partner,
                        card_type: card_type,
                        status: status,
                        from_create_date: from_create_date,
                        to_create_date: to_create_date,
                        from_complete_date: from_complete_date,
                        to_complete_date: to_complete_date,
                        card_value: card_value,
                        operation: operation,
                        request_id: request_id,
                        card_no: card_no,
                        serial_no: serial_no
                    },
                    success: function(response) {
                        $('#loading-overlay').addClass('d-none');
                        var totalByCardType = response.totals_by_card_type;
                        var total_all_amount = response.total_all_amount;
                        var total_all_balance = response.total_all_balance;
                        var sampleRow = $('#sample-row').clone().removeClass('d-none');
                        var totalAllAmount = $('#total-all-amount').clone().removeClass(
                            'd-none');
                        $('#total-per-card-type').empty();

                        $.each(totalByCardType, function(index, cardTypeData) {
                            var card_type = cardTypeData.card_type;
                            var total_amount = numberFormat(cardTypeData
                                .total_card_value_real);
                            var total_balance = numberFormat(cardTypeData
                                .total_balance);
                            var newRow = sampleRow.clone();
                            newRow.find('.card-type').text(card_type);
                            newRow.find('.total-amount').text(total_amount);
                            newRow.find('.total-balance').text(total_balance);
                            $('#total-per-card-type').append(newRow);

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

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

        <script>
            var dataTable;
            var userRole = "{{ checkRoleUser() }}";
            jQuery(document).ready(function($) {
                dataTable = $('#listCards').DataTable({
                    dom: 'lfirtp',
                    processing: true,
                    serverSide: true,
                    'pageLength': 50,
                    'pagingType': 'input',
                    'aLengthMenu': [
                        [50, 100, 200, -1],
                        [50, 100, 200, 'All']
                    ],
                    ajax: {
                        url: "{{ route('app.card_order.index') }}",
                        type: 'GET',
                        data: function(d) {
                            d.partner = $('#search-card [name="partner"]').val();
                            d.card_type = $('#search-card [name="card_type"]').val();
                            d.status = $('#search-card [name="status"]').val();
                            d.from_create_date = $('#search-card [name="from_create_date"]').val();
                            d.to_create_date = $('#search-card [name="to_create_date"]').val();
                            d.from_complete_date = $('#search-card [name="from_complete_date"]').val();
                            d.to_complete_date = $('#search-card [name="to_complete_date"]').val();
                            d.card_value = $('#search-card [name="card_value"]').val();
                            d.operation = $('#search-card [name="operation"]').val();
                            d.request_id = $('#search-card [name="request_id"]').val();
                            d.card_no = $('#search-card [name="card_no"]').val();
                            d.serial_no = $('#search-card [name="serial_no"]').val();
                        },
                        error: function(xhr, status, error) {
                            if (status == "parsererror") {
                                window.location.href = '/auth/login';
                            }
                        }
                    },
                    columns: [{
                            data: 'card_id',
                            className: 'text-center',
                            orderable: false,
                        },
                        {
                            data: 'request_id',
                            className: 'text-center',
                            orderable: false
                        },
                        {
                            data: 'user_id',
                            className: 'text-center',
                            orderable: false
                        },
                        {
                            data: 'card_type',
                            name: 'card_type',
                            className: 'text-center',
                            orderable: false,
                        },
                        {
                            data: 'card_no',
                            className: 'text-center',
                            orderable: false,
                        },
                        {
                            data: 'serial_no',
                            className: 'text-center',
                            orderable: false,
                        },
                        {
                            data: 'card_value',
                            render: (data) => {
                                return numberFormat(data);
                            },
                            className: 'text-right',
                        },
                        {
                            data: 'card_value_real',
                            render: (data) => {
                                return numberFormat(data);
                            },
                            className: 'text-right',
                        },
                        {
                            data: 'fee',
                            render: function(data, type, row) {
                                if (type === 'display') {
                                    return data + '%';
                                }
                                return data;
                            },
                            className: 'text-right',
                            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: 'created_at',
                            className: 'text-center',
                        },
                        {
                            data: 'note',
                            visible: userRole
                        },
                        {
                            data: 'operation',
                            render: function(data, type, row) {
                                if (data === 'manual') {
                                    return `<span class="badge bg-primary">Thủ công</span>`;
                                } else if (data === 'auto') {
                                    return `<span class="badge bg-secondary">Tự động</span>`;
                                } else {
                                    return '';
                                }
                            },
                            visible: userRole,
                            orderable: false
                        },
                        {
                            data: 'handler',
                            visible: userRole,
                            orderable: false
                        },
                        {
                            data: 'gate_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: 'actions',
                            orderable: false,
                            className: 'text-center',
                            visible: userRole,
                        }
                    ],
                    order: [
                        [11, 'desc']
                    ],
                });

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

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

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

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

                function refreshData() {
                    if (!refreshData.isRefreshing) {
                        refreshData.isRefreshing = true;
                        dataTable.ajax.reload(null, false);
                        dataTable.on('draw', function() {
                            refreshData.isRefreshing = false;
                        });
                    }
                }

                var autoRefreshInterval;
                $(document).on('click', '#refresh-btn', function() {
                    var isAutoRefresh = $(this).data('auto-refresh') || false;

                    if (isAutoRefresh) {
                        clearInterval(autoRefreshInterval);
                        $(this).data('auto-refresh', false);
                        $(this).find('#refresh-text').text('Tự động làm mới: Tắt');
                    } else {
                        $(this).data('auto-refresh', true);
                        $(this).find('#refresh-text').text('Tự động làm mới: Bật');
                        autoRefreshInterval = setInterval(refreshData, 15000);
                    }
                });

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

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

                $.ajax({
                    url: '/get-card-data/' + card_id,
                    method: 'GET',
                    success: function(response) {
                        $('#card_id').val(response.card.cash_in_id);
                        $('#request_id').val(response.card.request_id);
                        $('#partner').val(response.partner);
                        $('#card_value_real').val(numberFormat(response.card.card_value_real));
                        $('#card_value').val(numberFormat(response.card.card_value));
                        $('#card_no').val(response.card.card_no);
                        $('#serial_no').val(response.card.serial_no);
                        $('#balance').val(numberFormat(response.card.balance));
                        $('#fee').val(response.card.fee);
                        $('#note').val(response.card.note);
                        $('#status').val(response.card.status);
                        $('#disabled_status').val(response.card.status);
                        if (response.card.status === 'success') {
                            $('#status').prop('disabled', true);
                        } else if (response.card.status === 'fail') {
                            $('#error').prop('selected', true);
                        } else if (response.card.status === 'pending') {
                            $('#pending').prop('selected', true);
                        }
                    },
                    error: function(error) {
                        console.error('Lỗi lấy thông tin thẻ:', error);
                        toastr.error(error);
                    }
                });
            });

            $(document).on('click', '.recallbackCard', function() {
                var $form = $(this).closest('form');
                var dataTable = $('#listCards').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 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">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dist/css/input.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dist/css/cashout/cashout.css') }}">

    @endsection