@extends('admin.layouts.main')
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.css">
<style>
	body {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background-color: #f5f6fa;
	}
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
	
	* {
		font-family: 'Inter', sans-serif;
	}

	::-webkit-scrollbar {
		width: 8px;
	}

	::-webkit-scrollbar-track {
		background: #f1f1f1;
	}

	::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 4px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

	.content-wrapper {
		background: #f5f6fa !important;
		padding: 20px;
	}

	.content-wrapper>.content {
		padding: 0;
		margin: 0 !important;
	}

	/* Filter Card */
	.filter-card {
		background: #ffffff;
		border-radius: 8px;
		padding: 25px;
		margin-bottom: 25px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
		border: 1px solid #e5e7eb;
	}

	.filter-card .form-control,
	.filter-card select {
		border-radius: 6px;
		border: 1px solid #d1d5db;
		padding: 8px 12px;
		transition: all 0.2s ease;
		font-size: 14px;
	}

	.filter-card .form-control:focus,
	.filter-card select:focus {
		border-color: #3b82f6;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
		outline: none;
	}

	.filter-card label {
		font-weight: 500;
		color: #374151;
		margin-bottom: 6px;
		font-size: 13px;
	}

	.filter-title {
		margin-bottom: 20px;
		color: #1f2937;
		font-weight: 600;
		font-size: 16px;
	}

	.btn-primary {
		background: #3b82f6;
		border: none;
		border-radius: 6px;
		padding: 8px 16px;
		font-weight: 500;
		transition: all 0.2s ease;
		font-size: 14px;
	}

	.btn-primary:hover {
		background: #2563eb;
	}

	.btn-secondary {
		background: #6b7280;
		border: none;
		border-radius: 6px;
		padding: 8px 16px;
		font-weight: 500;
		transition: all 0.2s ease;
		font-size: 14px;
	}

	.btn-secondary:hover {
		background: #4b5563;
	}

	/* Section Headers */
	.section-header {
		background: #ffffff;
		border-radius: 8px;
		padding: 16px 20px;
		margin-bottom: 20px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
		border-left: 4px solid #3b82f6;
	}

	.section-header h3 {
		margin: 0;
		color: #1f2937;
		font-weight: 600;
		font-size: 18px;
	}

	/* Stats Cards */
	.stats-card {
		background: #ffffff;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
		border: 1px solid #e5e7eb;
		transition: all 0.2s ease;
		height: 100%;
	}

	.stats-card:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
		transform: translateY(-2px);
	}

	.stats-icon {
		width: 56px;
		height: 56px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: white;
		float: left;
		margin-right: 16px;
	}

	.stats-card.success .stats-icon {
		background: #10b981;
	}

	.stats-card.warning .stats-icon {
		background: #f59e0b;
	}

	.stats-card.info .stats-icon {
		background: #3b82f6;
	}

	.stats-card.danger .stats-icon {
		background: #ef4444;
	}

	.stats-card.primary .stats-icon {
		background: #6366f1;
	}

	.stats-card.secondary .stats-icon {
		background: #6b7280;
	}

	.stats-content {
		overflow: hidden;
		padding-top: 4px;
	}

	.stats-title {
		font-size: 13px;
		color: #6b7280;
		font-weight: 500;
		margin-bottom: 6px;
	}

	.stats-number {
		font-size: 24px;
		font-weight: 700;
		color: #1f2937;
		margin: 0;
		line-height: 1.2;
	}

	/* Content Cards */
	.content-card {
		background: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
		border: 1px solid #e5e7eb;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.content-card .card-header {
		background: #f9fafb;
		border-bottom: 1px solid #e5e7eb;
		padding: 16px 20px;
	}

	.content-card .card-title {
		color: #1f2937;
		font-weight: 600;
		font-size: 16px;
		margin: 0;
	}

	.content-card .card-body {
		padding: 0;
		background: white;
	}

	/* List Items */
	.list-news-home {
		padding: 0;
		margin: 0;
	}

	.list-news-home .list-group-item {
		border: none;
		border-bottom: 1px solid #f3f4f6;
		padding: 14px 20px;
		transition: background 0.2s ease;
	}

	.list-news-home .list-group-item:last-child {
		border-bottom: none;
	}

	.list-news-home .list-group-item:hover {
		background: #f9fafb;
	}

	.list-news-home .list-group-item a {
		color: #374151;
		text-decoration: none;
		font-weight: 400;
		display: flex;
		align-items: center;
		font-size: 14px;
		transition: color 0.2s ease;
	}

	.list-news-home .list-group-item a:hover {
		color: #3b82f6;
	}

	.list-news-home .list-group-item a i {
		margin-right: 10px;
		color: #9ca3af;
		font-size: 14px;
	}

	/* Responsive */
	@media (max-width: 768px) {
		.stats-card {
			margin-bottom: 15px;
		}

		.stats-number {
			font-size: 20px;
		}

		.filter-card {
			padding: 20px;
		}
	}
</style>
@endsection
@section('title',"Trang chủ admin")
@section('content')
<div class="content-wrapper">
   <div class="content mt-3">
      <div class="container-fluid">
         
         <!-- Bộ lọc -->
         <div class="row">
            <div class="col-md-12">
               <div class="filter-card">
                  <h5 class="filter-title">
                     <i class="fas fa-filter"></i> Bộ lọc thống kê
                  </h5>
                  <form id="filterForm" method="GET" action="">
                     <div class="row align-items-end">
                        <div class="col-md-3 col-sm-6">
                           <div class="form-group">
                              <label>Từ ngày:</label>
                              <input type="date" name="start_date" class="form-control" value="{{ request('start_date') }}">
                           </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                           <div class="form-group">
                              <label>Đến ngày:</label>
                              <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}">
                           </div>
                        </div>
                        <div class="col-md-2 col-sm-6">
                           <div class="form-group">
                              <label>Tháng:</label>
                              <select name="month" class="form-control">
                                 <option value="">-- Chọn tháng --</option>
                                 @for($i = 1; $i <= 12; $i++)
                                    <option value="{{ $i }}" {{ request('month') == $i ? 'selected' : '' }}>Tháng {{ $i }}</option>
                                 @endfor
                              </select>
                           </div>
                        </div>
                        <div class="col-md-2 col-sm-6">
                           <div class="form-group">
                              <label>Năm:</label>
                              <select name="year" class="form-control">
                                 <option value="">-- Chọn năm --</option>
                                 @for($i = date('Y'); $i >= date('Y') - 5; $i--)
                                    <option value="{{ $i }}" {{ request('year') == $i ? 'selected' : '' }}>{{ $i }}</option>
                                 @endfor
                              </select>
                           </div>
                        </div>
                        <div class="col-md-2 col-sm-12">
                           <div class="form-group">
                              <button type="submit" class="btn btn-primary btn-block">
                                 <i class="fas fa-search"></i> Lọc
                              </button>
                              <a href="{{route('admin.index')}}" class="btn btn-secondary btn-block mt-2">
                                 <i class="fas fa-redo"></i> Reset
                              </a>
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>

         <!-- Thống kê -->
         <div class="row">
            <div class="col-md-12">
               <div class="section-header">
                  <h3><i class="fas fa-chart-bar"></i> Thống kê tổng quan</h3>
               </div>
            </div>
         </div>

         <div class="row">
            <!-- Tổng doanh số -->
            <div class="col-lg-4 col-md-6 col-sm-12">
               <div class="stats-card success">
                  <div class="stats-icon">
                     <i class="fas fa-dollar-sign"></i>
                  </div>
                  <div class="stats-content">
                     <div class="stats-title">Tổng doanh số</div>
                     <div class="stats-number">{{ number_format($totalRevenue ?? 0) }} đ</div>
                  </div>
               </div>
            </div>

            <!-- Đơn chưa thanh toán -->
            <div class="col-lg-4 col-md-6 col-sm-12">
               <div class="stats-card warning">
                  <div class="stats-icon">
                     <i class="fas fa-clock"></i>
                  </div>
                  <div class="stats-content">
                     <div class="stats-title">Đơn chưa thanh toán</div>
                     <div class="stats-number">{{ number_format($unpaidOrders ?? 0) }}</div>
                  </div>
               </div>
            </div>

            <!-- Tổng đơn hàng -->
            <div class="col-lg-4 col-md-6 col-sm-12">
               <div class="stats-card info">
                  <div class="stats-icon">
                     <i class="fas fa-shopping-cart"></i>
                  </div>
                  <div class="stats-content">
                     <div class="stats-title">Tổng số đơn hàng</div>
                     <div class="stats-number">{{ number_format($totalOrders ?? 0) }}</div>
                  </div>
               </div>
            </div>

            <!-- Tổng sản phẩm -->
            <div class="col-lg-4 col-md-6 col-sm-12">
               <div class="stats-card primary">
                  <div class="stats-icon">
                     <i class="fas fa-box"></i>
                  </div>
                  <div class="stats-content">
                     <div class="stats-title">Tổng số sản phẩm</div>
                     <div class="stats-number">{{ number_format($totalProduct) }}</div>
                  </div>
               </div>
            </div>

            <!-- Tổng bài viết -->
            <div class="col-lg-4 col-md-6 col-sm-12">
               <div class="stats-card danger">
                  <div class="stats-icon">
                     <i class="far fa-newspaper"></i>
                  </div>
                  <div class="stats-content">
                     <div class="stats-title">Tổng số bài viết</div>
                     <div class="stats-number">{{ number_format($totalPost) }}</div>
                  </div>
               </div>
            </div>

            <!-- Thông tin liên hệ -->
            <div class="col-lg-4 col-md-6 col-sm-12">
               <div class="stats-card secondary">
                  <div class="stats-icon">
                     <i class="fas fa-envelope"></i>
                  </div>
                  <div class="stats-content">
                     <div class="stats-title">Thông tin liên hệ</div>
                     <div class="stats-number">{{ number_format($countContact) }}</div>
                  </div>
               </div>
            </div>
         </div>

         <!-- Biểu đồ -->
         <div class="row mt-3">
            <div class="col-md-12">
               <div class="section-header">
                  <h3><i class="fas fa-chart-line"></i> Biểu đồ thống kê</h3>
               </div>
            </div>
         </div>

         <div class="row">
            <!-- Biểu đồ doanh thu -->
            <div class="col-md-8">
               <div class="content-card">
                  <div class="card-header">
                     <h3 class="card-title"><i class="fas fa-chart-area"></i> Biểu đồ doanh thu theo tháng</h3>
                  </div>
                  <div class="card-body" style="padding: 20px;">
                     <canvas id="revenueChart" style="height: 300px;"></canvas>
                  </div>
               </div>
            </div>

            <!-- Biểu đồ tròn thống kê -->
            <div class="col-md-4">
               <div class="content-card">
                  <div class="card-header">
                     <h3 class="card-title"><i class="fas fa-chart-pie"></i> Thống kê đơn hàng</h3>
                  </div>
                  <div class="card-body" style="padding: 20px;">
                     <canvas id="orderChart" style="height: 300px;"></canvas>
                  </div>
               </div>
            </div>
         </div>

         <!-- Danh sách nội dung -->
         <div class="row mt-3">
            <div class="col-md-6">
               <div class="content-card">
                  <div class="card-header">
                     <h3 class="card-title"><i class="fas fa-newspaper"></i> Bài viết mới nhất</h3>
                  </div>
                  <div class="card-body" style="height: 400px; overflow-y: auto;">
                     <ul class="list-news-home list-group">
                        @foreach ($postNews as $item)
                        <li class="list-group-item">
                           <a href="{{route('admin.post.edit',['id'=>$item->id])}}">
                              <i class="fas fa-angle-right"></i> {{ $item->name }}
                           </a>
                        </li>
                        @endforeach
                     </ul>
                  </div>
               </div>
            </div>

           <div class="col-md-6">
            <div class="content-card">
               <div class="card-header">
                  <h3 class="card-title">
                     <i class="fas fa-box-open"></i> Sản phẩm bán chạy
                  </h3>
               </div>

               <div class="card-body" style="height: 400px; overflow-y: auto;">
                  <ul class="list-news-home list-group">
                     @foreach ($productNews as $item)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                           <a href="{{ route('admin.product.edit',['id'=>$item->id]) }}" style="max-width: 400px;">
                              <i class="fas fa-angle-right"></i> {{ $item->name }}
                           </a>
                           <div class="text-muted small">
                              <span class="me-2">
                                 <i class="fas fa-shopping-cart"></i>
                                 {{ number_format($item->sold ?? 0) }}
                              </span>
                              
                           </div>
                        </li>
                     @endforeach
                  </ul>
               </div>
            </div>
         </div>
         </div>

      </div>
   </div>
</div>
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
@php
$labels = $chartLabels ?? ['Ngày 1','Ngày 2','Ngày 3','Ngày 4','Ngày 5','Ngày 6','Ngày 7'];
$chartData = $chartData ?? [0, 0, 0, 0, 0, 0, 0];
@endphp
<script>
// Biểu đồ doanh thu
var revenueCtx = document.getElementById('revenueChart').getContext('2d');
var revenueChart = new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: @json($labels),
        datasets: [{
            label: 'Doanh thu (VNĐ)',
            data: @json($chartData),
            borderColor: '#3b82f6',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4,
            pointRadius: 4,
            pointHoverRadius: 6,
            pointBackgroundColor: '#3b82f6',
            pointBorderColor: '#fff',
            pointBorderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: true,
                position: 'top',
                labels: {
                    font: {
                        size: 13,
                        family: 'Inter'
                    }
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                padding: 12,
                titleFont: {
                    size: 13
                },
                bodyFont: {
                    size: 12
                },
                callbacks: {
                    label: function(context) {
                        let label = context.dataset.label || '';
                        if (label) {
                            label += ': ';
                        }
                        label += new Intl.NumberFormat('vi-VN').format(context.parsed.y) + ' đ';
                        return label;
                    }
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    font: {
                        size: 12
                    },
                    callback: function(value) {
                        return new Intl.NumberFormat('vi-VN', { notation: 'compact' }).format(value);
                    }
                },
                grid: {
                    color: 'rgba(0, 0, 0, 0.05)'
                }
            },
            x: {
                ticks: {
                    font: {
                        size: 12
                    }
                },
                grid: {
                    display: false
                }
            }
        }
    }
});

// Biểu đồ tròn đơn hàng
var orderCtx = document.getElementById('orderChart').getContext('2d');
var orderChart = new Chart(orderCtx, {
    type: 'doughnut',
    data: {
        labels: ['Đã thanh toán', 'Chưa thanh toán', 'Đã hủy'],
        datasets: [{
            data: @json($orderStats ?? [0, 0, 0]),
            backgroundColor: [
                '#10b981',
                '#f59e0b',
                '#ef4444'
            ],
            borderWidth: 0,
            hoverOffset: 10
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: {
                        size: 13,
                        family: 'Inter'
                    },
                    usePointStyle: true,
                    pointStyle: 'circle'
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                padding: 12,
                titleFont: {
                    size: 13
                },
                bodyFont: {
                    size: 12
                },
                callbacks: {
                    label: function(context) {
                        let label = context.label || '';
                        if (label) {
                            label += ': ';
                        }
                        label += context.parsed + ' đơn';
                        return label;
                    }
                }
            }
        },
        cutout: '65%'
    }
});
</script>
@endsection