@extends('backend.layout')

@section('content')
		<div class="panel panel-flat">
		<div class="panel-heading">
			<h2 class="panel-title">Thống kê truy cập</h2>
			<div class="heading-elements">
				<button type="button" class="btn btn-link daterange-ranges heading-btn text-semibold">
					<i class="icon-calendar3 position-left"></i> <span></span> <b class="caret"></b>
				</button>
        	</div>
		</div>

		<div class="table-responsive">
			<table class="table table-xlg text-nowrap">
				<tbody>
					<tr>
						<td class="col-md-3">
							<div class="media-left media-middle">
								<a href="#" class="btn border-indigo-400 text-indigo-400 btn-flat btn-rounded btn-xs btn-icon"><i class="icon-calendar"></i></a>
							</div>

							<div class="media-left">
								<h5 class="text-semibold no-margin">
									{{ number_format($totalAllTime, 0, '.', '	') }} <small class="display-block no-margin">Từ trước đến nay</small>
								</h5>
							</div>
						</td>

						<td class="col-md-2">
							<div class="media-left media-middle">
								<a href="#" class="btn border-indigo-400 text-indigo-400 btn-flat btn-rounded btn-xs btn-icon"><i class="icon-calendar2"></i></a>
							</div>

							<div class="media-left">
								<h5 class="text-semibold no-margin">
									{{ number_format($totalThisMonth, 0, '.', '	') }} <small class="display-block no-margin">Tháng này</small>
								</h5>
							</div>
						</td>

						<td class="col-md-2">
							<div class="media-left media-middle">
								<a href="#" class="btn border-indigo-400 text-indigo-400 btn-flat btn-rounded btn-xs btn-icon"><i class="icon-calendar3"></i></a>
							</div>

							<div class="media-left">
								<h5 class="text-semibold no-margin">
									{{ number_format($totalThisWeek, 0, '.', '	') }} <small class="display-block no-margin">Tuần này</small>
								</h5>
							</div>
						</td>

						<td class="col-md-2">
							<div class="media-left media-middle">
								<a href="#" class="btn border-indigo-400 text-indigo-400 btn-flat btn-rounded btn-xs btn-icon"><i class="icon-checkmark3"></i></a>
							</div>

							<div class="media-left">
								<h5 class="text-semibold no-margin">
									{{ number_format($totalToday, 0, '.', '	') }} <small class="display-block no-margin">Hôm nay</small>
								</h5>
							</div>
						</td>

						<td class="col-md-2">
							<div class="media-left media-middle">
								<a href="#" class="btn border-indigo-400 text-indigo-400 btn-flat btn-rounded btn-xs btn-icon"><i class="icon-checkmark3"></i></a>
							</div>

							<div class="media-left">
								<h5 class="text-semibold no-margin">
									{{ number_format($now, 0, '.', '') }} <small class="display-block no-margin">Hiện tại</small>
								</h5>
							</div>
						</td>
					</tr>
				</tbody>
			</table>	
		</div>

		<div class="table-responsive">
			<table class="table text-nowrap">
				<thead>
					<tr>
						
					</tr>
				</thead>
				<tbody id="view">
					@include('backend.visit.table', ['urls' => $viewsByUrl, 'countries' => $viewsByCountry])
				</tbody>
			</table>
		</div>
	</div>
@endsection

@push('styles')
	
@endpush

@push('scripts')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/vi.min.js"></script>
	<script type="text/javascript">
		moment.locale('vi'); 
		$(function() {    
			$('.daterange-ranges').daterangepicker(
		    {
		        startDate: moment(),
		        endDate: moment(),
		        minDate: '01/01/2012',
		        maxDate: '12/31/2016',
		        dateLimit: { days: 60 },
		        ranges: {
		            'Hôm nay': [moment(), moment()],
		            'Hôm qua': [moment().subtract('days', 1), moment().subtract('days', 1)],
		            '7 ngày trước': [moment().subtract('days', 6), moment()],
		            '30 ngày trước': [moment().subtract('days', 29), moment()],
		            'Tháng này': [moment().startOf('month'), moment().endOf('month')],
		            'Tháng trước': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
		        },
		        opens: 'left',
		        applyClass: 'btn-small bg-slate-600 btn-block',
		        cancelClass: 'btn-small btn-default btn-block',
		        locale: {
		            format: 'MM/DD/YYYY',
		            applyLabel: 'Áp dụng',
		            cancelLabel: 'Hủy',
		            fromLabel: 'Từ',
		            toLabel: 'Đến',
		            weekLabel: 'Tuần',
		            customRangeLabel: 'Tùy chọn',
		        }
		    },
		    function(start, end) {
		        $('.daterange-ranges span').html(start.format('MMMM D') + ' - ' + end.format('MMMM D'));

		        $.get('{{ route("backend.visit.ajax") }}', {
			            start: start.format('YYYY-MM-DD HH:mm:ss'),
			            end: end.format('YYYY-MM-DD HH:mm:ss')
			        }, function(data) {
			            $('#view').html(data);
			        }).fail(function() {
			            console.error("Đã xảy ra lỗi trong quá trình lấy dữ liệu.");
			        });
		    }
		);

		// Cập nhật giá trị hiển thị
		$('.daterange-ranges span').html(moment().format('MMMM D') + ' - ' + moment().format('MMMM D'));

		});
	</script>
@endpush