@extends('table.app')

@section('styles')
@endsection

@section('content')
   <div style="display: none;">
        @includeIf('setting::view.table.filter')
        @includeIf('setting::view.table.table')
   </div>
   

    <!-- แสดงยอดการเข้าชมเว็บ -->
    <div class="card card-body">
        <ul class="nav nav-pills navtab-bg" id="stat-tabs">
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link active" data-period="1">
                    {{ __('filter.today') }}
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link" data-period="2">
                    {{ __('filter.yesterday') }}
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link" data-period="3">
                    {{ __('filter.last_7_days') }}
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link" data-period="7">
                    {{ __('filter.custom') }}
                </a>
            </li>
        </ul>
        <div style="display: none;">
            <x-select2.selection class="frm-filter" id="period" name="filter[period]" label="{{ __('filter.date') }}">
                @slot('option')
                    <option value="00">{{ __('filter.all') }}</option>
                    <option value="1" selected>{{ __('filter.today') }}</option>
                    <option value="2">{{ __('filter.yesterday') }}</option>
                    <option value="3">{{ __('filter.last_7_days') }}</option>
                    <option value="4">{{ __('filter.last_30_days') }}</option>
                    <option value="5">{{ __('filter.this_month') }}</option>
                    <option value="6">{{ __('filter.last_month') }}</option>
                    <option value="7">{{ __('filter.custom') }}</option>
                @endslot
            </x-select2.selection>
        </div>
        <div class="input-group mt-3 date-range" style="display: none;">
            <span class="input-group-text"><i class="mdi mdi-calendar-month"></i></span>
            <input class="form-control range-filter frm-filter" id="range" name="filter[range]" type="text" placeholder="{{ __('filter.range') }}">
        </div>
    </div>
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body widget-user">
                    <div class="text-center">
                        <h2 class="fw-normal text-primary" data-plugin="counterup" id="stat-filtered_total">{{ number_format($stats['filtered_total']) }}</h2>
                        <h5>{{ __('setting::view.filtered_total') }}</h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body widget-user">
                    <div class="text-center">
                        <h2 class="fw-normal text-pink" data-plugin="counterup" id="stat-filtered_unique">{{ number_format($stats['filtered_unique']) }}</h2>
                        <h5>{{ __('setting::view.filtered_unique') }}</h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body widget-user">
                    <div class="text-center">
                        <h2 class="fw-normal text-warning" data-plugin="counterup" id="stat-today">{{ number_format($stats['today']) }}</h2>
                        <h5>{{ __('setting::view.today') }}</h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body widget-user">
                    <div class="text-center">
                        <h2 class="fw-normal text-info" data-plugin="counterup" id="stat-total">{{ number_format($stats['total']) }}</h2>
                        <h5>{{ __('setting::view.total') }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    {{ module_vite('build-setting', 'resources/assets/js/view.js') }}
@endsection