{{-- Last Orders Table --}}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">
                    {{ __('dashboard::dashboard.last_orders') }}
                    <span class="text-muted fs-6" id="sub-title-orders">({{ __('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:changeOrdersFilter('{{ $k }}', '{{ __($v) }}')">
                                {{ __($v) }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-loading text-center" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover text-nowrap m-0">
                        <thead>
                            <tr>
                                <th style="width: 60px;">{{ __('dashboard::dashboard.table.no') }}</th>
                                <th>{{ __('dashboard::dashboard.table.order_no') }}</th>
                                <th>{{ __('dashboard::dashboard.table.status') }}</th>
                                <th class="text-end">{{ __('dashboard::dashboard.table.amount') }}</th>
                                <th class="text-end">{{ __('dashboard::dashboard.table.date') }}</th>
                            </tr>
                        </thead>
                        <tbody id="orders-tbody">
                            <tr>
                                <td class="text-center text-muted" colspan="5">
                                    {{ __('dashboard::dashboard.loading') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="table-no-data text-center text-muted py-4" style="display: none;">
                    <p class="mb-0">{{ __('dashboard::dashboard.no_data') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Order Detail Modal --}}
<div class="modal fade" id="order-detail-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="order-detail-modal-header">
                    {{-- header from ajax --}}
                </h5>
                <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="order-detail-modal-body">
                {{-- body from ajax --}}
            </div>
        </div>
    </div>
</div>