@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.top_sold_products') }}</h5>
        </div>
        <div class="dropdown">
            @include('dashboard.component._month_dropdown', ['reportType' => 'topSoldProduct'])
            @include('dashboard.component._year_dropdown', [
                'firstYear' => $firstYear,
                'reportType' => 'topSoldProduct',
            ])
        </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 Price Chart -->
                <li class="nav-item">
                    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                        data-bs-target="#navs-top-sold-product-price" aria-controls="navs-top-sold-product-price"
                        aria-selected="true">
                        <i class="tf-icons ti ti-currency-dollar ti-xs me-1"></i> {{ trans('admin.with_price') }}
                    </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-top-sold-product-qty" aria-controls="navs-top-sold-product-qty"
                        aria-selected="false">
                        <i class="tf-icons ti ti-server ti-xs me-1"></i> {{ trans('admin.with_quantity') }}
                    </button>
                </li>
            </ul>
            <div class="tab-content">
                <!-- Price Chart Tab Pane -->
                <div class="tab-pane fade show active" id="navs-top-sold-product-price" role="tabpanel">
                    <div id="topSoldProductPriceChart" data-chart="true"></div>
                </div>
                <!-- Quantity Chart Tab Pane -->
                <div class="tab-pane fade" id="navs-top-sold-product-qty" role="tabpanel">
                    <div id="topSoldProductQtyChart" data-chart="true"></div>
                </div>
            </div>
        </div>
        <div class="error-message"></div>
    </div>
</div>