@php use Carbon\Carbon; @endphp
<div class="card drag-item cursor-move">
    <div class="card-header d-flex justify-content-between">
        <div class="card-title mb-0">
            <h5 class="mb-0">{{ trans('admin.clients') }}</h5>
        </div>

        <div class="dropdown">
            @include('dashboard.component._year_dropdown', [
                'firstYear' => $firstYear,
                'reportType' => 'clients',
            ])
        </div>
    </div>
    <div class="card-body" style="cursor: default !important;">
        <div class="nav-align-top mb-4">
            <ul class="nav nav-tabs nav-fill mx-1" role="tablist">
                <!-- Tab for Avg Chart -->
                <li class="nav-item">
                    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                            data-bs-target="#navs-client-avg" aria-controls="navs-client-avg"
                            aria-selected="true">
                        <i class="tf-icons ti ti-currency-dollar ti-xs me-1"></i> {{ trans('admin.average_customer') }}
                    </button>
                </li>
                <!-- Tab for Quantity Chart -->
                <li class="nav-item">
                    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                            data-bs-target="#navs-client-count" aria-controls="navs-client-count"
                            aria-selected="false">
                        <i class="tf-icons ti ti-server ti-xs me-1"></i> {{ trans('admin.with_count') }}
                    </button>
                </li>
            </ul>
            <div class="tab-content">
                <!-- Avg Chart Tab Pane -->
                <div class="tab-pane fade show active" id="navs-client-avg" role="tabpanel">
                    <div id="clientsAvgChart" data-chart="true"></div>
                </div>
                <!-- Quantity Chart Tab Pane -->
                <div class="tab-pane fade" id="navs-client-count" role="tabpanel">
                    <div id="clientsCountChart" data-chart="true"></div>
                </div>
            </div>
        </div>
        <div class="error-message"></div>
    </div>
</div>