@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 class="text-center">{{ $partnerItem->username }}</td>
                                                    <td class="text-center">{{ 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">
                            {{ __('Access') }} <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">
                            {{ __('Access') }} <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">
                            {{ __('Access') }} <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">
                            {{ __('Access') }} <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">
                        @csrf
                        <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>
    <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>
        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 ($('#reportHomeDetailPartner').length) {
                function renderPartnerBadge(data, type, row) {
                    if (type !== 'display') return data || '';
                    return `<div class="partner-cell"><span class="partner-badge">${data || ''}</span></div>`;
                }

                function renderTxnType(data, type, row) {
                    const value = String(data || '').toLowerCase();

                    if (value === 'bank') return '<span class="type-badge type-bank">BANK</span>';
                    if (value === 'momo') return '<span class="type-badge type-momo">MOMO</span>';
                    if (value === 'card') return '<span class="type-badge type-card">CARD</span>';

                    return `<span class="type-badge">${String(data || '').toUpperCase()}</span>`;
                }

                function renderMoneyCell(data, type, row) {
                    const num = Number(data || 0);
                    if (type !== 'display') return num;
                    return `<div class="text-right fw-semibold">${num.toLocaleString('en-US')}</div>`;
                }

                function renderCountCell(data, type, row) {
                    const num = Number(data || 0);
                    if (type !== 'display') return num;
                    return `<div class="text-center">${num.toLocaleString('en-US')}</div>`;
                }

                function renderRateCell(data, type, row) {
                    let value = parseFloat(String(data || 0).replace('%', '').trim());
                    if (isNaN(value)) value = 0;

                    if (type !== 'display') return value;

                    let badgeClass = 'rate-low';
                    if (value >= 90) {
                        badgeClass = 'rate-good';
                    } else if (value >= 70) {
                        badgeClass = 'rate-mid';
                    }

                    return `<div class="text-center"><span class="rate-badge ${badgeClass}">${value}%</span></div>`;
                }

                const dataTablePartner = $('#reportHomeDetailPartner').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: false,
                    autoWidth: false,
                    scrollX: true,
                    searching: true,
                    lengthChange: true,
                    pageLength: 100,
                    pagingType: 'simple_numbers',
                    dom: "<'row align-items-center mb-3'<'col-md-6'l><'col-md-6 text-md-right'f>>" +
                        "<'table-responsive'tr>" +
                        "<'row align-items-center mt-3'<'col-md-5'i><'col-md-7 d-flex justify-content-md-end justify-content-center'p>>",
                    lengthMenu: [
                        [25, 50, 100, -1],
                        [25, 50, 100, {{ \Illuminate\Support\Js::from(__('Tất cả')) }}]
                    ],
                    language: {
                        search: {{ \Illuminate\Support\Js::from(__('Tìm kiếm:')) }},
                        lengthMenu: {{ \Illuminate\Support\Js::from(__('Hiển thị _MENU_ dòng')) }},
                        info: {{ \Illuminate\Support\Js::from(__('Hiển thị _START_ - _END_ / _TOTAL_ dòng')) }},
                        infoEmpty: {{ \Illuminate\Support\Js::from(__('Không có dữ liệu')) }},
                        zeroRecords: {{ \Illuminate\Support\Js::from(__('Không tìm thấy dữ liệu')) }},
                        processing: {{ \Illuminate\Support\Js::from(__('Đang tải...')) }},
                        paginate: {
                            previous: {{ \Illuminate\Support\Js::from(__('Trước')) }},
                            next: {{ \Illuminate\Support\Js::from(__('Sau')) }}
                        }
                    },
                    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,
                            searchable: false,
                            className: 'nowrap partner-col',
                            render: renderPartnerBadge
                        },
                        {
                            data: 'type',
                            orderable: false,
                            searchable: false,
                            className: 'text-center nowrap',
                            render: renderTxnType
                        },
                        {
                            data: 'total_cashin_amount',
                            orderable: true,
                            searchable: false,
                            className: 'text-right nowrap total-cashin-col',
                            render: renderMoneyCell
                        },
                        {
                            data: 'cashin_amount',
                            orderable: false,
                            searchable: false,
                            className: 'text-right nowrap',
                            render: renderMoneyCell
                        },
                        {
                            data: 'cashin_fee',
                            orderable: false,
                            searchable: false,
                            className: 'text-right nowrap',
                            render: renderMoneyCell
                        },
                        {
                            data: 'cashin_count_all',
                            orderable: false,
                            searchable: false,
                            className: 'text-center nowrap',
                            render: renderCountCell
                        },
                        {
                            data: 'cashin_count_success',
                            orderable: false,
                            searchable: false,
                            className: 'text-center nowrap',
                            render: renderCountCell
                        },
                        {
                            data: 'cashin_success_rate',
                            orderable: false,
                            searchable: false,
                            className: 'text-center nowrap',
                            render: renderRateCell
                        },
                        {
                            data: 'cashout_amount',
                            orderable: false,
                            searchable: false,
                            className: 'text-right nowrap',
                            render: renderMoneyCell
                        },
                        {
                            data: 'cashout_fee',
                            orderable: false,
                            searchable: false,
                            className: 'text-right nowrap',
                            render: renderMoneyCell
                        },
                        {
                            data: 'cashout_count_all',
                            orderable: false,
                            searchable: false,
                            className: 'text-center nowrap',
                            render: renderCountCell
                        },
                        {
                            data: 'cashout_count_success',
                            orderable: false,
                            searchable: false,
                            className: 'text-center nowrap',
                            render: renderCountCell
                        },
                        {
                            data: 'cashout_success_rate',
                            orderable: false,
                            searchable: false,
                            className: 'text-center nowrap',
                            render: renderRateCell
                        }
                    ],
                    order: [
                        [2, 'desc']
                    ],
                    drawCallback: function() {
                        const api = this.api();
                        const rows = api.rows({
                            page: 'current'
                        }).nodes();

                        let lastPartner = null;
                        let partnerCell = null;
                        let totalCashinCell = null;
                        let rowspan = 1;

                        // reset trước khi merge lại
                        $(rows).each(function() {
                            $('td.partner-col, td.total-cashin-col', this)
                                .show()
                                .removeAttr('rowspan')
                                .css({
                                    'vertical-align': '',
                                    'text-align': ''
                                });
                        });

                        api.rows({
                            page: 'current'
                        }).every(function() {
                            const rowData = this.data();
                            const partner = rowData.partner || '';
                            const rowNode = this.node();

                            const $partnerCell = $('td.partner-col', rowNode);
                            const $totalCashinCell = $('td.total-cashin-col', rowNode);

                            if (partner === lastPartner) {
                                rowspan++;

                                $partnerCell.hide();
                                $totalCashinCell.hide();

                                if (partnerCell) {
                                    partnerCell.attr('rowspan', rowspan);
                                }

                                if (totalCashinCell) {
                                    totalCashinCell.attr('rowspan', rowspan);
                                }
                            } else {
                                lastPartner = partner;
                                partnerCell = $partnerCell;
                                totalCashinCell = $totalCashinCell;
                                rowspan = 1;

                                $partnerCell.show().attr('rowspan', 1).css({
                                    'vertical-align': 'middle',
                                    'text-align': 'center'
                                });

                                $totalCashinCell.show().attr('rowspan', 1).css({
                                    'vertical-align': 'middle',
                                    'text-align': 'right'
                                });
                            }
                        });
                    }
                });

                $(document).on('submit', '#search-report-home-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="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.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;
            }
        }

        .report-partner-card {
            border-radius: 14px;
        }

        .report-partner-table-wrap {
            overflow-x: auto;
            border: 1px solid #dee2e6;
            border-radius: 12px;
        }

        #reportHomeDetailPartner {
            min-width: 1800px !important;
            font-size: 13px;
        }

        #reportHomeDetailPartner thead th {
            vertical-align: middle !important;
            white-space: nowrap;
            font-weight: 700;
            text-align: center;
        }

        #reportHomeDetailPartner tbody td {
            vertical-align: middle !important;
            white-space: nowrap;
        }

        #reportHomeDetailPartner .group-header th {
            position: sticky;
            top: 0;
            z-index: 30;
            background: #d9edf7 !important;
            color: #1f2937;
        }

        #reportHomeDetailPartner .sub-header th {
            position: sticky;
            top: 48px;
            z-index: 29;
            background: #eef7fb !important;
            color: #1f2937;
        }

        #reportHomeDetailPartner .bg-deposit {
            background: #dff4ea !important;
            color: #166534;
        }

        #reportHomeDetailPartner .bg-withdraw {
            background: #fde8e8 !important;
            color: #991b1b;
        }

        .sticky-col-partner {
            position: sticky !important;
            left: 0;
            z-index: 35 !important;
            background: #f8fbfd !important;
        }

        #reportHomeDetailPartner tbody td.sticky-col-partner-cell {
            position: sticky;
            left: 0;
            z-index: 10;
            background: #fff;
        }

        #reportHomeDetailPartner tbody tr:nth-child(even) td.sticky-col-partner-cell {
            background: #f8f9fa;
        }

        .partner-cell {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .partner-badge {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 999px;
            background: #dc3545;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
            min-width: 64px;
            text-align: center;
        }

        .type-badge {
            display: inline-block;
            min-width: 70px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            background: #e9ecef;
            color: #333;
            text-align: center;
        }

        .type-bank {
            background: #e3f2fd;
            color: #0d47a1;
        }

        .type-momo {
            background: #fce4ec;
            color: #ad1457;
        }

        .type-card {
            background: #ede7f6;
            color: #5e35b1;
        }

        .rate-badge {
            display: inline-block;
            min-width: 70px;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
        }

        .rate-good {
            background: #d1fae5;
            color: #065f46;
        }

        .rate-mid {
            background: #fef3c7;
            color: #92400e;
        }

        .rate-low {
            background: #fee2e2;
            color: #991b1b;
        }

        .min-w-120 {
            min-width: 120px;
        }

        .min-w-130 {
            min-width: 130px;
        }

        .min-w-140 {
            min-width: 140px;
        }

        .min-w-150 {
            min-width: 150px;
        }

        @media (max-width: 768px) {
            #reportHomeDetailPartner {
                font-size: 12px;
            }

            #reportHomeDetailPartner .group-header th,
            #reportHomeDetailPartner .sub-header th {
                position: static;
            }

            .sticky-col-partner,
            #reportHomeDetailPartner tbody td.sticky-col-partner-cell {
                position: static !important;
            }
        }

        .partner-col {
            vertical-align: middle !important;
            text-align: center !important;
        }

        .partner-cell {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100%;
        }

        .partner-badge {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 999px;
            background: #dc3545;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
            min-width: 64px;
            text-align: center;
        }

        /* ===== DataTables control đẹp hơn ===== */
        .dataTables_wrapper {
            padding: 0;
        }

        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 0;
        }

        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            font-weight: 600;
            color: #374151;
            margin-bottom: 0;
        }

        .dataTables_wrapper .dataTables_filter input,
        .dataTables_wrapper .dataTables_length select {
            height: 38px;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            padding: 6px 12px;
            background: #fff;
            box-shadow: none;
            outline: none;
        }

        .dataTables_wrapper .dataTables_filter input {
            min-width: 220px;
            margin-left: 8px;
        }

        .dataTables_wrapper .dataTables_length select {
            min-width: 90px;
            margin: 0 8px;
        }

        .dataTables_wrapper .dataTables_info {
            padding-top: 0.75rem;
            color: #6b7280;
            font-size: 13px;
        }

        .dataTables_wrapper .dataTables_paginate {
            padding-top: 0.5rem;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 10px !important;
            border: 1px solid #d1d5db !important;
            background: #fff !important;
            color: #374151 !important;
            margin-left: 4px;
            min-width: 38px;
            text-align: center;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: #0d6efd !important;
            border-color: #0d6efd !important;
            color: #fff !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #f3f4f6 !important;
            border-color: #cbd5e1 !important;
            color: #111827 !important;
        }

        /* ===== Card/filter/table ===== */
        #search-report-home-partner {
            padding: 12px 14px;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #f8fafc;
            margin-bottom: 16px;
        }

        #reportHomeDetailPartner {
            border-collapse: separate !important;
            border-spacing: 0;
        }

        #reportHomeDetailPartner thead th {
            background: #cfe8f6 !important;
            border-bottom: 2px solid #9ec5db !important;
            font-size: 13px;
        }

        #reportHomeDetailPartner tbody tr:nth-child(even) {
            background: #fafafa;
        }

        #reportHomeDetailPartner tbody tr:hover {
            background: #f3f9ff !important;
        }

        #reportHomeDetailPartner tbody td {
            font-size: 13px;
            padding: 10px 12px;
        }

        /* Fix pagination xuống dòng xấu */
        .dataTables_wrapper .row {
            margin-left: 0;
            margin-right: 0;
        }

        .dataTables_wrapper .col-md-6,
        .dataTables_wrapper .col-md-5,
        .dataTables_wrapper .col-md-7 {
            padding-left: 0;
            padding-right: 0;
        }

        .total-cashin-col {
            vertical-align: middle !important;
        }

        #reportHomeDetailPartner td.total-cashin-col {
            font-weight: 700;
            background-color: #faf7ff;
        }
    </style>
@endsection