@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('admin|support|supporter')
    <div class="page-wrapper">
        <div class="page-body">
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h4 class="text-warning f-w-600">{{ \App\Models\User\User::countPartnerActive() }}</h4>
                                    <h6 class="text-muted m-b-0">{{ __('partner') }}</h6>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="feather fa-solid fa-user-plus f-28 text-warning"></i>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-c-warning">
                             <a href="{{ route('app.partner.index') }}">
                                <div class="row align-items-center">
                                    <div class="col-9">
                                        <p class="text-white mb-0">{{ __('Access') }}</p>
                                    </div>
                                    <div class="col-3 text-right">
                                    <i class="fas fa-arrow-circle-right f-16 text-white"></i>
                                    </div>
                                </div>
                             </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h4 class="text-info f-w-600">{{ $lastReport ? number_format($lastReport->cashin) : 0 }}</h4>
                                    <h6 class="text-muted m-b-0">{{ __('cashin') }}</h6>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="nav-icon fas fa-money-bill f-28 text-info"></i>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-c-info">
                             <a href="{{ route('app.cashin.index') }}">
                                <div class="row align-items-center">
                                    <div class="col-9">
                                        <p class="text-white mb-0">{{ __('Access') }}</p>
                                    </div>
                                    <div class="col-3 text-right">
                                    <i class="fas fa-arrow-circle-right f-16 text-white"></i>
                                    </div>
                                </div>
                             </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h4 class="text-success f-w-600">{{ $lastReport ? number_format($lastReport->cashout) : 0 }}</h4>
                                    <h6 class="text-muted m-b-0">{{ __('cashout') }}</h6>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="nav-icon fas fa-coins f-28 text-success"></i>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-c-success">
                             <a href="{{ route('app.cashout.index') }}">
                                <div class="row align-items-center">
                                    <div class="col-9">
                                        <p class="text-white mb-0">{{ __('Access') }}</p>
                                    </div>
                                    <div class="col-3 text-right">
                                    <i class="fas fa-arrow-circle-right f-16 text-white"></i>
                                    </div>
                                </div>
                             </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h4 class="text-danger f-w-600">{{ $lastReport ? number_format($lastReport->withdraw) : 0 }}</h4>
                                    <h6 class="text-muted m-b-0">{{ __('withdraw') }}</h6>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="nav-icon fas fa-right-left f-28 text-danger"></i>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-c-danger">
                             <a href="{{ route('app.withdraw.index') }}">
                                <div class="row align-items-center">
                                    <div class="col-9">
                                        <p class="text-white mb-0">{{ __('Access') }}</p>
                                    </div>
                                    <div class="col-3 text-right">
                                    <i class="fas fa-arrow-circle-right f-16 text-white"></i>
                                    </div>
                                </div>
                             </a>
                        </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 ? $lastReport->updated_at : __('no_infomation') }}</i></span>
                </div>
            </div>
        </div>
    </div>
    @endrole

    @role('partner')
    <div class="col-lg-12 mx-auto">
        <div class="page-wrapper">
            <div class="page-body">
                <div class="row justify-content-center">
                    <div class="col-lg-3">
                        <div class="card">
                            <div class="card-block">
                                <div class="row align-items-center">
                                    <div class="col-8">
                                        <h4 class="text-info f-w-600">{{ $lastReport ? number_format($lastReport->cashin) : 0 }}</h4>
                                        <h6 class="text-muted m-b-0">{{ __('cashin') }}</h6>
                                    </div>
                                    <div class="col-4 text-right">
                                        <i class="nav-icon fas fa-money-bill f-28 text-info"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer bg-c-info">
                                <a href="{{ route('app.cashin.index') }}">
                                    <div class="row align-items-center">
                                        <div class="col-9">
                                            <p class="text-white mb-0">{{ __('Access') }}</p>
                                        </div>
                                        <div class="col-3 text-right">
                                        <i class="fas fa-arrow-circle-right f-16 text-white"></i>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="card">
                            <div class="card-block">
                                <div class="row align-items-center">
                                    <div class="col-8">
                                        <h4 class="text-success f-w-600">{{ $lastReport ? number_format($lastReport->cashout) : 0 }}</h4>
                                        <h6 class="text-muted m-b-0">{{ __('cashout') }}</h6>
                                    </div>
                                    <div class="col-4 text-right">
                                        <i class="nav-icon fas fa-coins f-28 text-success"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer bg-c-success">
                                <a href="{{ route('app.cashout.index') }}">
                                    <div class="row align-items-center">
                                        <div class="col-9">
                                            <p class="text-white mb-0">{{ __('Access') }}</p>
                                        </div>
                                        <div class="col-3 text-right">
                                        <i class="fas fa-arrow-circle-right f-16 text-white"></i>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="card">
                            <div class="card-block">
                                <div class="row align-items-center">
                                    <div class="col-8">
                                        <h4 class="text-danger f-w-600">{{ $lastReport ? number_format($lastReport->withdraw) : 0 }}</h4>
                                        <h6 class="text-muted m-b-0">{{ __('withdraw') }}</h6>
                                    </div>
                                    <div class="col-4 text-right">
                                        <i class="nav-icon fas fa-right-left f-28 text-danger"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer bg-c-danger">
                                <a href="{{ route('app.withdraw.index') }}">
                                    <div class="row align-items-center">
                                        <div class="col-9">
                                            <p class="text-white mb-0">{{ __('Access') }}</p>
                                        </div>
                                        <div class="col-3 text-right">
                                        <i class="fas fa-arrow-circle-right f-16 text-white"></i>
                                        </div>
                                    </div>
                                </a>
                            </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 ? $lastReport->updated_at : __('no_infomation') }}</i></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endrole

    <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">
                @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"
                                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|supporter')
                <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"
                        onclick="document.getElementsByName('is_search')[0].value = 'true'">
                        <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>
    @role('admin|supporter')
    <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"
                        onclick="document.getElementsByName('is_search')[0].value = 'true'">
                        <i class="fa fa-search"></i>{{ __('search') }}
                    </button>
                </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 <!-- Keep any scripts that were already there -->
<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 type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.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($) {
        var totalCashinAmount, totalCashinFee, totalCashinCountAll, totalCashinCountSuccess;
        var 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 = $('#search-report-home [name="from_create_date"]').val();
                    d.to_create_date = $('#search-report-home [name="to_create_date"]').val();
                    d.partner = $('#search-report-home select[name="partner"]').val();
                },
                dataSrc: function(json) {
                    var totalCashinSuccessRate = 0;
                    var totalCashoutSuccessRate = 0;
                    var cashinCount = 0;
                    var cashoutCount = 0;
                    json.data.forEach(function(item) {
                        var cashinRate = parseFloat(item.cashin_success_rate.replace('%',
                            ''));
                        var cashoutRate = parseFloat(item.cashout_success_rate.replace('%',
                            ''));
                        if (item.cashin_success_rate > 0) {
                            totalCashinSuccessRate += parseFloat(item.cashin_success_rate);
                            cashinCount++;
                        }
                        if (item.cashout_success_rate > 0) {
                            totalCashoutSuccessRate += parseFloat(item
                                .cashout_success_rate);
                            cashoutCount++;
                        }
                    });

                    var averageCashinSuccessRate = cashinCount > 0 ? (totalCashinSuccessRate /
                        cashinCount).toFixed(2) : '0.00';
                    var averageCashoutSuccessRate = cashoutCount > 0 ? (totalCashoutSuccessRate /
                        cashoutCount).toFixed(2) : '0.00';
                    totalCashinAmount = json.totalCashinAmount;
                    totalCashinFee = json.totalCashinFee;
                    totalCashinCountAll = json.totalCashinCountAll;
                    totalCashinCountSuccess = json.totalCashinCountSuccess;
                    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, error) {
                    if (status == "parsererror") {
                        window.location.href = '/auth/login';
                    }
                }
            },
            columns: [{
                    data: 'type',
                    orderable: false,
                    class: "nowrap",
                    render: function(data, type, full, meta) {
                        if (data == 'bank') {
                            return 'BANK';
                        } else {
                            return data;
                        }
                    }
                },
                {
                    data: 'cashin_amount',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashin_fee',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashin_count_all',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashin_count_success',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashin_success_rate',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return data + '%';
                    }
                },
                {
                    data: 'cashout_amount',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },

                {
                    data: 'cashout_fee',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashout_count_all',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashout_count_success',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashout_success_rate',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return data + '%';
                    }
                },
            ]
        });
        $(document).on('click', '#btn-search', function(event) {
            event.preventDefault();
            dataTable.ajax.reload();
        });
        var 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 = $(
                        '#search-report-home-partner [name="from_create_date_partner"]').val();
                    d.to_create_date_partner = $(
                        '#search-report-home-partner [name="to_create_date_partner"]').val();
                },
                error: function(xhr, status, error) {
                    if (status == "parsererror") {
                        window.location.href = '/auth/login';
                    }
                }
            },
            columns: [{
                    data: 'partner',
                    orderable: false,
                    class: "nowrap"
                },
                {
                    data: 'type',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        if (data == 'bank') {
                            return 'BANK';
                        } else {
                            return data;
                        }
                    }
                },
                {
                    data: 'total_cashin_amount'
                },
                {
                    data: 'cashin_amount',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashin_fee',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashin_count_all',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashin_count_success',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashin_success_rate',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return data + '%';
                    }
                },
                {
                    data: 'cashout_amount',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },

                {
                    data: 'cashout_fee',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashout_count_all',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashout_count_success',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return numberFormat(data);
                    }
                },
                {
                    data: 'cashout_success_rate',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return data + '%';
                    }
                },
            ],
            order: [
                [2, 'desc']
            ],
            drawCallback: function(settings) {
                var classRowspan2 = '.rowspan-2';
                var classRowspan0 = '.rowspan-0';
                var orderInfo = settings.aaSorting;
                orderInfo.forEach(function(order) {
                    var columnIdx = order[0];
                    var sortDirection = order[1];
                    if (settings.aoColumns[columnIdx].data === 'total_cashin_amount') {
                        if (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');
            }
        });
    });

    function numberFormat(number) {
        return new Intl.NumberFormat('en-US').format(number);
    }
</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;
    }

    #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 {
        td:first-child.sorting_1 {
            background-color: yellowgreen;
        }

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

    .page-wrapper {
        padding: 1rem;
        padding-bottom: 0;
        -webkit-transition: all ease-in .3s;
        transition: all ease-in .3s;
    }

    .card {
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
        box-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
        border: none;
        margin-bottom: 30px;
    }

    .card-block {
        padding: 1.25rem;
    }

    .text-c-yellow {
        color: #fe9365;
    }

    .text-muted {
        color: #919aa3 !important;
    }
    .f-28 {
    font-size: 28px;
    }
    .f-16 {
    font-size: 16px;
    }
    .bg-c-warning {
        background-image: linear-gradient(to right, #eff405, #feb798);
    }
    .bg-c-info {
        background-image: linear-gradient(to right,#01a9ac,#01dbdf);
        }
    .bg-c-success {
        background-image: linear-gradient(to right, #0ac282, #0df3a3);
            }
    .bg-c-danger {
        background-image: linear-gradient(to right, #fe5d70, #fe909d);
                }
    .card-footer:hover {
        background-image: linear-gradient(to right, rgba(165, 42, 42, 0.9), rgba(210, 105, 30, 0.9)); /* Màu nâu khi hover */
        transition: background 0.3s ease; /* Hiệu ứng mượt mà khi chuyển đổi */
}
</style>
@endsection