@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>{{ __('Báo cáo tài khoản cuối 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ày') }}</span>
                    </div>
                    <input type="date" class="form-control" name="create_date" 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="">{{ __('select') }}</option>
                        <option value="bank">{{ __('Bank') }}</option>
                        <option value="Momo">{{ __('Momo') }}</option>
                        <option value="ZaloPay">{{ __('ZaloPay') }}</option>
                        <option value="ViettelPay">{{ __('ViettelPay') }}</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">{{ __('Loại Tài khoản') }}</span>
                    </div>
                    <select name="acc_type" class="form-control">
                        <option value="">{{ __('select') }}</option>
                        <option value="receive">{{ __('Nhận tiền') }}</option>
                        <option value="transfer">{{ __('Chuyển tiền') }}</option>
                        <option value="receive_and_transfer">{{ __('Nhận và Chuyển tiền') }}</option>
                        <option value="deposited_in">{{ __('Dồn tiền') }}</option>
                        <option value="hook">{{ __('Hook') }}</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">{{ __('account') }}</span>
                    </div>
                    <input type="text" class="form-control" name="acc_no" placeholder="{{ __('Số TK/ĐT') }}">
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <button type="submit" class="btn btn-success" id="btn-search"><i
                    class="fa fa-search"></i>{{ __('search') }}</button>
            <a class="btn btn-warning" href="{{ route('app.admin.report.compareaccountData') }}">
                <i class="fa fa-exchange-alt"></i>{{ __(' Kiểm tra tài khoản') }}
            </a>

        </div>
    </form>
    <div class="card">
        <div class="sum-balances" style="padding-left: 1rem;">
            <strong id="sum-balances"></strong>
        </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>{{ __('Loại GD') }}</th>
                            <th>{{ __('Tên bank') }}</th>
                            <th>{{ __('Chủ tài khoản') }}</th>
                            <th>{{ __('Loại tài khoản') }}</th>
                            <th>{{ __('Tổng tiền nạp') }}</th>
                            <th>{{ __('Tổng tiền rút') }}</th>
                            <th>{{ __('Số dư cuối ngày') }}</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.accountData') }}',
                type: 'GET',
                data: function(d) {
                    d.create_date = $('#search-report-account [name="create_date"]').val();
                    d.type = $('#search-report-account [name="type"]').val();
                    d.acc_type = $('#search-report-account [name="acc_type"]').val();
                    d.acc_no = $('#search-report-account [name="acc_no"]').val();
                },
                dataSrc: function(json) {
                    if (json.data.length > 0) {
                        $('#sum-balances').html("Tổng số dư là: " + numberFormat(json.totalBalance));
                    } else {
                        $('#sum-balances').html("");

                    }
                    return json.data;
                },
                error: function(xhr, status, error) {
                    if (status == "parsererror") {
                        window.location.href = '/auth/login';
                    }
                }
            },
            columns: [{
                    data: 'acc_no',
                    orderable: false,
                },
                {
                    data: 'type',
                    orderable: false,
                    className: 'text-center',
                },
                {
                    data: 'bank_name',
                    orderable: false,
                    className: 'text-center',
                },
                {
                    data: 'acc_name',
                    orderable: false,
                },
                {
                    data: 'acc_type',
                    render: (data) => {
                        if (data === 'receive') {
                            return `<span class="badge bg-secondary p-3">Nhận tiền</span>`;
                        } else if (data === 'transfer') {
                            return `<span class="badge bg-primary p-3">Chuyển tiền</span>`;
                        } else if (data === 'receive_and_transfer') {
                            return `<span class="badge bg-secondary p-3">Nhận và chuyển tiền</span>`;
                        } else if (data === 'deposited_in') {
                            return `<span class="badge bg-dark p-3">Dồn tiền</span>`;
                        } else if (data === 'hook') {
                            return `<span class="badge bg-warning p-3">Hook</span>`;
                        }
                    },
                    orderable: false,
                    className: 'text-center',
                },
                {
                    data: 'total_deposited',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'total_withdrawed',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'balance_enddate',
                    render: function(data, type, row) {
                        return numberFormat(data);
                    }
                }
            ],
            order: [
                ['7', 'desc'],
            ],
        });

        $(document).on('click', '#btn-search', 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);
    }
</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