@extends('layouts.app')

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

@section('dashboard')
    active
@endsection

@section('section.header')
@endsection

@section('section.content')
    <section class="content">
        <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">Processing, please wait...</div>
        </div>
        @role('accountant')
            <div class="row">
                {{-- Bỏ ô "Số dư hiện tại của bạn": tài khoản quản lí đối tác không giữ
                     số dư nên ô đó luôn hiển thị 0. Số dư cần theo dõi là của từng đối
                     tác, đã có trong bảng bên dưới. --}}
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title mb-0">{{ __('Danh sách tài khoản được quản lý') }}</h3>
                        </div>
                        <div class="card-body p-0">
                            @if (isset($accountantPartners) && $accountantPartners->count())
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped mb-0">
                                        <thead class="text-center" style="background-color: rgb(198, 222, 235)">
                                            <tr>
                                                <th style="width: 70px">#</th>
                                                <th>{{ __('Tên tài khoản') }}</th>
                                                <th>{{ __('Số dư hiện tại') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($accountantPartners as $index => $partnerItem)
                                                <tr>
                                                    <td class="text-center">{{ $index + 1 }}</td>
                                                    <td>{{ $partnerItem->username }}</td>
                                                    <td class="text-end">{{ number_format($partnerItem->balance ?? 0) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="p-3 text-muted">
                                    {{ __('Chưa có đối tác nào được gán cho tài khoản này.') }}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endrole

        @role('admin|support')
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h4>{{ \App\Models\User\User::countPartnerActive() }}</h4>
                            <p>{{ __('partner') }}</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <a href="{{ route('app.partner.index') }}" class="small-box-footer">
                            {{ __('Truy cập') }} <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h4>{{ $lastReport ? number_format($lastReport->cashin) : 0 }}</h4>
                            <p>{{ __('cashin') }}</p>
                        </div>
                        <div class="icon">
                            <i class="nav-icon fas fa-money-bill"></i>
                        </div>
                        <a href="{{ route('app.cashin.index') }}" class="small-box-footer">
                            {{ __('Truy cập') }} <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h4>{{ $lastReport ? number_format($lastReport->cashout) : 0 }}</h4>
                            <p>{{ __('cashout') }}</p>
                        </div>
                        <div class="icon">
                            <i class="nav-icon fas fa-coins"></i>
                        </div>
                        <a href="{{ route('app.cashout.index') }}" class="small-box-footer">
                            {{ __('Truy cập') }} <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h4>{{ $lastReport ? number_format($lastReport->withdraw) : 0 }}</h4>
                            <p>{{ __('withdraw') }}</p>
                        </div>
                        <div class="icon">
                            <i class="nav-icon fas fa-right-left"></i>
                        </div>
                        <a href="{{ route('app.withdraw.index') }}" class="small-box-footer">
                            {{ __('Truy cập') }} <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-12 text-center mb-3">
                    {{-- <button type="submit" class="btn btn-primary" id="btn-home-refresh">{{ __('refresh') }}</button> --}}
                    <span class="ml-lg-5">
                        <i>
                            {{ __('last_refreshed_at') }}:
                            {{ $lastReport ? $lastReport->updated_at : __('no_infomation') }}
                        </i>
                    </span>
                </div>
            </div>
        @endrole

        @role('partner')
            @if (!$user->only_card)
                <div class="col-lg-12 mx-auto">
                    <div class="row justify-content-center">
                        <div class="col-lg-3 mt-3">
                            <div class="info-box bg-warning">
                                <span class="info-box-icon bg-info elevation-1">
                                    <a href="{{ route('app.cashin.index') }}">
                                        <i class="nav-icon fas fa-money-bill"></i>
                                    </a>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">{{ __('cashin') }}</span>
                                    <span class="info-box-number">
                                        <h4>{{ $lastReport ? number_format($lastReport->cashin) : 0 }}</h4>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 mt-3">
                            <div class="info-box mb-3 bg-success">
                                <span class="info-box-icon bg-danger elevation-1">
                                    <a href="{{ route('app.cashout.index') }}">
                                        <i class="nav-icon fas fa-coins"></i>
                                    </a>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">{{ __('cashout') }}</span>
                                    <span class="info-box-number">
                                        <h4>{{ $lastReport ? number_format($lastReport->cashout) : 0 }}</h4>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 mt-3">
                            <div class="info-box mb-3 bg-info">
                                <span class="info-box-icon bg-success elevation-1">
                                    <a href="{{ route('app.withdraw.index') }}">
                                        <i class="nav-icon fas fa-right-left"></i>
                                    </a>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">{{ __('withdraw') }}</span>
                                    <span class="info-box-number">
                                        <h4>{{ $lastReport ? number_format($lastReport->withdraw) : 0 }}</h4>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 text-center mb-3">
                            {{-- <button type="submit" class="btn btn-primary" id="btn-home-refresh">{{ __('refresh') }}</button> --}}
                            <span class="ml-lg-5">
                                <i>
                                    {{ __('last_refreshed_at') }}:
                                    {{ $lastReport->updated_at ?? __('no_infomation') }}
                                </i>
                            </span>
                        </div>
                    </div>
                </div>
            @endif
        @endrole

        @if ($user->only_card)
            <div class="card">
                <div class="card-header">
                    <h3>{{ __('Thống kê số liệu') }}</h3>
                </div>
                <div class="card-body">
                    <form class="row" id="search-report-home" action="{{ route('app.index') }}" method="GET">
                        <input type="hidden" name="is_search" value="false">

                        <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">{{ __('time') }}</span>
                                    </div>
                                    <input type="date" class="form-control" name="from_create_date"
                                        value="{{ date('Y-m-d') }}">
                                    <input type="date" class="form-control" name="to_create_date"
                                        value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <button type="submit" class="btn btn-success" id="btn-search-home">
                                <i class="fa fa-search"></i> {{ __('search') }}
                            </button>
                        </div>
                    </form>

                    <table class="table table-bordered table-striped display" id="reportHomeDetail" style="width:100%">
                        <thead style="text-align: center; background-color: rgb(198, 222, 235)">
                            <tr>
                                <th>{{ __('transaction_type') }}</th>
                                <th>{{ __('deposit_amount') }}</th>
                                <th>{{ __('deposit_fee') }}</th>
                                <th>{{ __('deposit_order_number') }}</th>
                                <th>{{ __('deposit_order_number_successful') }}</th>
                                <th>{{ __('deposit_rate_successful') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        @else
            {{-- Quản lí đối tác không dùng bảng này nên ẩn đi cho gọn.
                 Admin, support và đối tác vẫn xem bình thường. --}}
            @unlessrole('accountant')
            <div class="card">
                <div class="card-header">
                    <h3>{{ __('statistics_by_payment_type') }}</h3>
                </div>
                <div class="card-body">
                    <form class="row" id="search-report-home" action="{{ route('app.index') }}" method="GET">
                        <input type="hidden" name="is_search" value="false">

                        <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">{{ __('time') }}</span>
                                    </div>
                                    <input type="date" class="form-control" name="from_create_date"
                                        value="{{ date('Y-m-d') }}">
                                    <input type="date" class="form-control" name="to_create_date"
                                        value="{{ date('Y-m-d') }}">
                                </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">{{ __('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 }}"
                                                    {{ old('partner', session('search.partner')) == $partner->id ? 'selected' : '' }}>
                                                    {{ $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-4">
                            <button type="submit" class="btn btn-success" id="btn-search-home">
                                <i class="fa fa-search"></i> {{ __('search') }}
                            </button>
                        </div>
                    </form>

                    <table class="table table-bordered table-striped display" id="reportHomeDetail" style="width:100%">
                        <thead style="text-align: center; background-color: rgb(198, 222, 235)">
                            <tr>
                                <th>{{ __('transaction_type') }}</th>
                                <th>{{ __('deposit_amount') }}</th>
                                <th>{{ __('deposit_fee') }}</th>
                                <th>{{ __('deposit_order_number') }}</th>
                                <th>{{ __('deposit_order_number_successful') }}</th>
                                <th>{{ __('deposit_rate_successful') }}</th>
                                <th>{{ __('withdrawal_amount') }}</th>
                                <th>{{ __('withdrawal_fee') }}</th>
                                <th>{{ __('withdrawal_order_number') }}</th>
                                <th>{{ __('withdrawal_order_number_successful') }}</th>
                                <th>{{ __('withdrawal_success_rate') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            @endunlessrole
        @endif

        {{-- Kế toán xem được bảng này, nhưng dữ liệu đã bị giới hạn về
             đúng nhóm đối tác họ quản lí ngay trong
             HomeController::buildPartnerBaseQuery(). --}}
        @role('admin|accountant')
            <div class="card">
                <div class="card-header">
                    <h3>{{ __('statistics_by_partner') }}</h3>
                </div>
                <div class="card-body">
                    <form class="row" id="search-report-home-partner" action="{{ route('app.home.list.partner') }}"
                        method="GET">
                        <input type="hidden" name="is_search" value="false">

                        <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">{{ __('time') }}</span>
                                    </div>
                                    <input type="date" class="form-control" name="from_create_date_partner"
                                        value="{{ date('Y-m-d') }}">
                                    <input type="date" class="form-control" name="to_create_date_partner"
                                        value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <button type="submit" class="btn btn-success" id="btn-search-partner">
                                <i class="fa fa-search"></i> {{ __('search') }}
                            </button>
                            @include('partials.export-excel-button', [
                                'route' => route('app.home.exportPartnerStatistic'),
                                'form'  => '#search-report-home-partner',
                            ])
                        </div>
                    </form>

                    <table class="table table-bordered table-striped display" id="reportHomeDetailPartner"
                        style="width:100%">
                        <thead style="text-align: center; background-color: rgb(198, 222, 235)">
                            <tr>
                                <th>{{ __('partner') }}</th>
                                <th>{{ __('transaction_type') }}</th>
                                <th>{{ __('total_recharge') }}</th>
                                <th>{{ __('deposit_amount') }}</th>
                                <th>{{ __('deposit_fee') }}</th>
                                <th>{{ __('deposit_order_number') }}</th>
                                <th>{{ __('deposit_order_number_successful') }}</th>
                                <th>{{ __('deposit_rate_successful') }}</th>
                                <th>{{ __('withdrawal_amount') }}</th>
                                <th>{{ __('withdrawal_fee') }}</th>
                                <th>{{ __('withdrawal_order_number') }}</th>
                                <th>{{ __('withdrawal_order_number_successful') }}</th>
                                <th>{{ __('withdrawal_success_rate') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        @endrole
    </section>
@endsection

@section('scripts')
    @parent
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    {{-- Giữ nguyên bộ local để tránh thay đổi luồng hiện tại --}}
    <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>

    {{-- Pagination input plugin --}}
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>

    <script>
        jQuery(document).ready(function($) {
            const isOnlyCard = @json((bool) $user->only_card);

            function numberFormat(number) {
                const value = Number(number || 0);
                return new Intl.NumberFormat('en-US').format(value);
            }

            function normalizePercent(value) {
                if (value === null || value === undefined || value === '') {
                    return 0;
                }

                if (typeof value === 'string') {
                    value = value.replace('%', '').trim();
                }

                const parsed = parseFloat(value);
                return isNaN(parsed) ? 0 : parsed;
            }

            function renderPercent(data) {
                return normalizePercent(data) + '%';
            }

            function renderType(data) {
                if (data === 'bank') {
                    return 'BANK';
                }

                if (isOnlyCard) {
                    return 'CARD';
                }

                return data;
            }

            const $searchReportHome = $('#search-report-home');
            const $searchReportHomePartner = $('#search-report-home-partner');

            if ($searchReportHome.length) {
                $searchReportHome.on('submit', function() {
                    $(this).find('[name="is_search"]').val('true');
                });
            }

            if ($searchReportHomePartner.length) {
                $searchReportHomePartner.on('submit', function() {
                    $(this).find('[name="is_search"]').val('true');
                });
            }

            if ($('#reportHomeDetail').length) {
                let totalCashinAmount = 0;
                let totalCashinFee = 0;
                let totalCashinCountAll = 0;
                let totalCashinCountSuccess = 0;

                const reportHomeColumns = isOnlyCard ? [{
                        data: 'type',
                        orderable: false,
                        class: 'nowrap',
                        render: function(data) {
                            return renderType(data);
                        }
                    },
                    {
                        data: 'cashin_amount',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashin_fee',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashin_count_all',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashin_count_success',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashin_success_rate',
                        orderable: false,
                        render: function(data) {
                            return renderPercent(data);
                        }
                    }
                ] : [{
                        data: 'type',
                        orderable: false,
                        class: 'nowrap',
                        render: function(data) {
                            return renderType(data);
                        }
                    },
                    {
                        data: 'cashin_amount',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashin_fee',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashin_count_all',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashin_count_success',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashin_success_rate',
                        orderable: false,
                        render: function(data) {
                            return renderPercent(data);
                        }
                    },
                    {
                        data: 'cashout_amount',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashout_fee',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashout_count_all',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashout_count_success',
                        orderable: false,
                        render: function(data) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'cashout_success_rate',
                        orderable: false,
                        render: function(data) {
                            return renderPercent(data);
                        }
                    }
                ];

                const dataTable = $('#reportHomeDetail').DataTable({
                    dom: 'lifrtp',
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    rowReorder: {
                        selector: 'td:nth-child(2)'
                    },
                    pageLength: 50,
                    pagingType: 'input',
                    aLengthMenu: [
                        [50, 100, 200, -1],
                        [50, 100, 200, 'All']
                    ],
                    ajax: {
                        url: '{{ route('app.index') }}',
                        type: 'GET',
                        data: function(d) {
                            d.from_create_date = $searchReportHome.find(
                                '[name="from_create_date"]').val();
                            d.to_create_date = $searchReportHome.find(
                                '[name="to_create_date"]').val();

                            const $partnerSelect = $searchReportHome.find('select[name="partner"]');
                            d.partner = $partnerSelect.length ? $partnerSelect.val() : '';
                        },
                        dataSrc: function(json) {
                            let totalCashinSuccessRate = 0;
                            let totalCashoutSuccessRate = 0;
                            let cashinCount = 0;
                            let cashoutCount = 0;

                            json.data.forEach(function(item) {
                                const cashinRate = normalizePercent(item.cashin_success_rate);
                                const cashoutRate = normalizePercent(item.cashout_success_rate);

                                if (cashinRate > 0) {
                                    totalCashinSuccessRate += cashinRate;
                                    cashinCount++;
                                }

                                if (cashoutRate > 0) {
                                    totalCashoutSuccessRate += cashoutRate;
                                    cashoutCount++;
                                }
                            });

                            const averageCashinSuccessRate = cashinCount > 0 ?
                                (totalCashinSuccessRate / cashinCount).toFixed(2) :
                                '0.00';

                            const averageCashoutSuccessRate = cashoutCount > 0 ?
                                (totalCashoutSuccessRate / cashoutCount).toFixed(2) :
                                '0.00';

                            totalCashinAmount = json.totalCashinAmount;
                            totalCashinFee = json.totalCashinFee;
                            totalCashinCountAll = json.totalCashinCountAll;
                            totalCashinCountSuccess = json.totalCashinCountSuccess;

                            if (isOnlyCard) {
                                json.data.push({
                                    type: '{{ __('total') }}',
                                    cashin_amount: totalCashinAmount,
                                    cashin_fee: totalCashinFee,
                                    cashin_count_all: totalCashinCountAll,
                                    cashin_count_success: totalCashinCountSuccess,
                                    cashin_success_rate: averageCashinSuccessRate
                                });
                            } else {
                                json.data.push({
                                    type: '{{ __('total') }}',
                                    cashin_amount: totalCashinAmount,
                                    cashin_fee: totalCashinFee,
                                    cashin_count_all: totalCashinCountAll,
                                    cashin_count_success: totalCashinCountSuccess,
                                    cashin_success_rate: averageCashinSuccessRate,
                                    cashout_amount: json.totalCashoutAmount,
                                    cashout_fee: json.totalCashoutFee,
                                    cashout_count_all: json.totalCashoutCountAll,
                                    cashout_count_success: json.totalCashoutCountSuccess,
                                    cashout_success_rate: averageCashoutSuccessRate
                                });
                            }

                            return json.data;
                        },
                        error: function(xhr, status) {
                            if (status === 'parsererror') {
                                window.location.href = '/auth/login';
                            }
                        }
                    },
                    columns: reportHomeColumns
                });

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

            if ($('#reportHomeDetailPartner').length) {
                const dataTablePartner = $('#reportHomeDetailPartner').DataTable({
                    dom: 'lifrtp',
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    rowReorder: {
                        selector: 'td:nth-child(2)'
                    },
                    pageLength: 50,
                    pagingType: 'input',
                    aLengthMenu: [
                        [50, 100, 200, -1],
                        [50, 100, 200, 'All']
                    ],
                    ajax: {
                        url: '{{ route('app.home.list.partner') }}',
                        type: 'GET',
                        data: function(d) {
                            d.from_create_date_partner = $searchReportHomePartner.find(
                                '[name="from_create_date_partner"]').val();
                            d.to_create_date_partner = $searchReportHomePartner.find(
                                '[name="to_create_date_partner"]').val();
                        },
                        error: function(xhr, status) {
                            if (status === 'parsererror') {
                                window.location.href = '/auth/login';
                            }
                        }
                    },
                    columns: [{
                            data: 'partner',
                            orderable: false,
                            class: 'nowrap'
                        },
                        {
                            data: 'type',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return data === 'bank' ? 'BANK' : data;
                            }
                        },
                        {
                            data: 'total_cashin_amount'
                        },
                        {
                            data: 'cashin_amount',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return numberFormat(data);
                            }
                        },
                        {
                            data: 'cashin_fee',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return numberFormat(data);
                            }
                        },
                        {
                            data: 'cashin_count_all',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return numberFormat(data);
                            }
                        },
                        {
                            data: 'cashin_count_success',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return numberFormat(data);
                            }
                        },
                        {
                            data: 'cashin_success_rate',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return renderPercent(data);
                            }
                        },
                        {
                            data: 'cashout_amount',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return numberFormat(data);
                            }
                        },
                        {
                            data: 'cashout_fee',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return numberFormat(data);
                            }
                        },
                        {
                            data: 'cashout_count_all',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return numberFormat(data);
                            }
                        },
                        {
                            data: 'cashout_count_success',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return numberFormat(data);
                            }
                        },
                        {
                            data: 'cashout_success_rate',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return renderPercent(data);
                            }
                        },
                    ],
                    order: [
                        [2, 'desc']
                    ],
                    drawCallback: function(settings) {
                        let classRowspan2 = '.rowspan-2';
                        let classRowspan0 = '.rowspan-0';
                        const orderInfo = settings.aaSorting || [];

                        orderInfo.forEach(function(order) {
                            const columnIdx = order[0];
                            const sortDirection = order[1];

                            if (
                                settings.aoColumns[columnIdx] &&
                                settings.aoColumns[columnIdx].data === 'total_cashin_amount' &&
                                sortDirection === 'asc'
                            ) {
                                classRowspan2 = '.rowspan-0';
                                classRowspan0 = '.rowspan-2';
                            }
                        });

                        if (!window.matchMedia("(max-width: 768px)").matches) {
                            $("#reportHomeDetailPartner").find(classRowspan2).each(function() {
                                $(this).parent().attr('rowspan', 2).css({
                                    'vertical-align': 'middle',
                                    'text-align': 'center',
                                    'border-bottom': '1px solid #c7bcbc'
                                });
                            });

                            $("#reportHomeDetailPartner").find(classRowspan0).each(function() {
                                $(this).parent().css({
                                    'display': 'none'
                                });
                            });
                        }
                    }
                });

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

            $('#btn-home-refresh').click(function(e) {
                e.preventDefault();
                $('#loading-overlay').removeClass('d-none');

                $.ajax({
                    url: '{{ route('app.reportHomeData') }}',
                    type: 'GET',
                    success: function(response) {
                        $('#loading-overlay').addClass('d-none');

                        if (response.code == 1) {
                            toastr.success(response.msg);
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        } else if (response.code == 0) {
                            toastr.error(response.msg);
                        }
                    },
                    error: function(e) {
                        toastr.error(e);
                        $('#loading-overlay').addClass('d-none');
                    }
                });
            });
        });
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.5.0/css/rowReorder.dataTables.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

    <style>
        #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;
            flex-direction: column;
        }

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

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

        #reportHomeDetail tbody tr:last-child {
            background-color: yellowgreen;
        }

        #reportHomeDetail tbody tr:last-child td:first-child.sorting_1 {
            background-color: yellowgreen;
        }

        #reportHomeDetail tbody tr td.nowrap,
        #reportHomeDetailPartner tbody tr td.nowrap {
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .btn-primary {
                font-size: 14px;
                padding: 5px 10px;
            }

            .ml-lg-5 {
                margin-left: 0 !important;
                margin-top: 10px;
            }

            .badge-info {
                font-size: 14px;
                padding: 5px 10px;
            }
        }
    </style>
@endsection