{{-- Charts Row --}}
<div class="row">
    {{-- Order Status Chart --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">
                    {{ __('dashboard::dashboard.charts.status') }}
                    <span class="text-muted fs-6" id="sub-title-status">({{ __('dashboard::dashboard.filter.total') }})</span>
                </h4>
                <div class="dropdown">
                    <a class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="mdi mdi-dots-vertical"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                        @php
                            $opts = [
                                1 => 'dashboard::dashboard.filter.day',
                                2 => 'dashboard::dashboard.filter.week',
                                3 => 'dashboard::dashboard.filter.month',
                                4 => 'dashboard::dashboard.filter.total',
                            ];
                        @endphp
                        @foreach ($opts as $k => $v)
                            <a class="dropdown-item" href="javascript:changeStatusFilter('{{ $k }}', '{{ __($v) }}')">
                                {{ __($v) }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <div class="chart-loading text-center" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <canvas id="statusChart" height="300"></canvas>
                    <div class="chart-no-data text-center text-muted" style="display: none;">
                        <p>{{ __('dashboard::dashboard.no_data') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Daily Orders Chart --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">
                    {{ __('dashboard::dashboard.charts.daily') }}
                    <span class="text-muted fs-6" id="sub-title-daily">(7 {{ __('dashboard::dashboard.filter.days') }})</span>
                </h4>
                <div class="dropdown">
                    <a class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="mdi mdi-dots-vertical"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                        @php
                            $days_opts = [
                                7 => '7 ' . __('dashboard::dashboard.filter.days'),
                                14 => '14 ' . __('dashboard::dashboard.filter.days'),
                                30 => '30 ' . __('dashboard::dashboard.filter.days'),
                            ];
                        @endphp
                        @foreach ($days_opts as $k => $v)
                            <a class="dropdown-item" href="javascript:changeDailyFilter('{{ $k }}', '{{ $v }}')">
                                {{ $v }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <div class="chart-loading text-center" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <canvas id="dailyChart" height="300"></canvas>
                    <div class="chart-no-data text-center text-muted" style="display: none;">
                        <p>{{ __('dashboard::dashboard.no_data') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Top Products Chart --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">
                    {{ __('dashboard::dashboard.charts.products') }}
                    <span class="text-muted fs-6" id="sub-title-products">({{ __('dashboard::dashboard.filter.total') }})</span>
                </h4>
                <div class="dropdown">
                    <a class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="mdi mdi-dots-vertical"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                        @php
                            $opts = [
                                1 => 'dashboard::dashboard.filter.day',
                                2 => 'dashboard::dashboard.filter.week',
                                3 => 'dashboard::dashboard.filter.month',
                                4 => 'dashboard::dashboard.filter.total',
                            ];
                        @endphp
                        @foreach ($opts as $k => $v)
                            <a class="dropdown-item" href="javascript:changeProductsFilter('{{ $k }}', '{{ __($v) }}')">
                                {{ __($v) }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <div class="chart-loading text-center" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <canvas id="productsChart" height="300"></canvas>
                    <div class="chart-no-data text-center text-muted" style="display: none;">
                        <p>{{ __('dashboard::dashboard.no_data') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>