@extends('layouts.app')

@section('title')
{{ __('Báo cáo tài khoản cuối ngày') }}
@endsection

@section('report')
active
@endsection

@section('section.header')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{ __('So sánh 2 ngày') }}</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">{{ __('Báo cáo') }}</li>
                </ol>
            </div>
        </div>
        <hr>
    </div><!-- /.container-fluid -->
</section>
@endsection

@section('section.content')
<section class="content">
    <form class="row" id="search-report-account">
        @csrf
        <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">{{ __('Ngày1') }}</span>
                    </div>
                    <input type="date" class="form-control" name="date1" value="{{ date('Y-m-d', strtotime('-2 day')) }}">
                </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">{{ __('Ngày2') }}</span>
                    </div>
                    <input type="date" class="form-control" name="date2" value="{{ date('Y-m-d', strtotime('-1 day')) }}">
                </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">{{ __('Loại GD') }}</span>
                    </div>
                    <select name="type" class="form-control">
                        <option value="Momo">{{ __('Momo') }}</option>
                        <option value="bank">{{ __('Bank') }}</option>
                        <option value="ZaloPay">{{ __('ZaloPay') }}</option>
                        <option value="ViettelPay">{{ __('ViettelPay') }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <button type="submit" class="btn btn-success" id="btn-compare">{{ __('So sánh') }}</button>
        </div>
    </form>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Danh sách các tài khoản thay đổi</h3>
            <div class="card-tools">
                <a class="btn btn-sm btn-secondary" id="export-compare-bankaccount" href="javascript:void(0)"><i
                class="fa-solid fa-file-excel"></i>{{ __('export_excel') }}</a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-">
                <table class="table table-bordered table-striped" id="listAccounts">
                    <thead style="text-align: center; background-color: rgb(198, 222, 235)">
                        <tr>
                            <th>{{ __('STK/Số ví') }}</th>
                            <th>{{ __('Tổng nạp trước') }}</th>
                            <th>{{ __('Tổng nạp sau') }}</th>
                            <th>{{ __('Tổng rút trước') }}</th>
                            <th>{{ __('Tổng rút sau') }}</th>
                            <th>{{ __('Số dư trước') }}</th>
                            <th>{{ __('số dư sau') }}</th>
                        </tr>
                    </thead>
                </table>
            </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($) {

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

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

        var dataTable = $('#listAccounts').DataTable({
            'pagingType': 'input',
            dom: 'lifrtp',
            processing: true,
            serverSide: true,
            info: true,
            'pageLength': 50,
            'aLengthMenu': [
                [50, 100, 200, -1],
                [50, 100, 200, 'All']
            ],
            ajax: {
                url: '{{ route('app.admin.report.compareaccountData') }}',
                type: 'GET',
                data: function(d) {
                    d.date1 = $('#search-report-account [name="date1"]').val();
                    d.date2 = $('#search-report-account [name="date2"]').val();
                    d.type = $('#search-report-account [name="type"]').val();
                },
                error: function(xhr, status, error) {
                    if (status == "parsererror") {
                        window.location.href = '/auth/login';
                    }
                }
            },
            columns: [{
                    data: 'acc_no',
                    name: 'acc_no',
                    className: 'text-center'
                },
                {
                    data: 'total_deposited_before',
                    name: 'total_deposited_before',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    },
                    className: 'text-center',
                    visible:false
                },
                {
                    data: 'total_deposited_after',
                    name: 'total_deposited_after',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    },
                    className: 'text-center'
                },
                {
                    data: 'total_withdrawed_before',
                    name: 'total_withdrawed_before',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    },
                    className: 'text-center',
                    visible:false
                },
                {
                    data: 'total_withdrawed_after',
                    name: 'total_withdrawed_after',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    },
                    className: 'text-center'
                },
                {
                    data: 'balance_before',
                    name: 'balance_before',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    },
                    className: 'text-center'
                },
                {
                    data: 'balance_after',
                    name: 'balance_after',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    },
                    className: 'text-center'
                }
            ],
            order: [
                ['5', 'desc'],
            ],
        });

        $(document).on('click', '#btn-compare', function(event) {
            event.preventDefault();
            dataTable.ajax.reload();
        });

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

    function formatTime(isoTime) {
        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 `${hours}:${minutes}:${seconds} ${day}/${month}/${year}`;
    }

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

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

            return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;

        } catch (error) {
            return error.toString();
        }
    }

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

    $('#export-compare-bankaccount').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "{{ route('app.exportCompareBankAccount') }}",
                data: $('#search-report-account').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>
@endsection

@section('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css"
    rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="{{ asset('dist/css/input.css') }}">
<style>
    .dataTables_wrapper .table td.text-right {
        text-align: right;
    }

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

    .modal-lg {
        max-width: 80%;
    }

    .modal-lg .modal-dialog {
        width: 100%;
        margin: 0 auto;
    }
</style>
@endsection