@extends('table.app')

@section('content')
    <!-- page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Dashboard - ข้อมูลสินค้าในระบบ</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">ข้อมูลสินค้า</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- สถิติสินค้าในระบบ -->
    <div class="row g-4">
        <!-- สินค้าทั้งหมด -->
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="card bg-gradient-primary text-white h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h2 class="mb-1 fw-bold">{{ number_format($stats['contents'] ?? 0) }}</h2>
                            <p class="mb-0 fs-6">สินค้าทั้งหมด</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="bg-white bg-opacity-20 rounded-circle p-3">
                                <i class="fas fa-box fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- หมวดหมู่สินค้า -->
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="card bg-gradient-success text-white h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h2 class="mb-1 fw-bold">{{ number_format($stats['menus'] ?? 0) }}</h2>
                            <p class="mb-0 fs-6">หมวดหมู่สินค้า</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="bg-white bg-opacity-20 rounded-circle p-3">
                                <i class="fas fa-list fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- แบนเนอร์สินค้า -->
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="card bg-gradient-info text-white h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h2 class="mb-1 fw-bold">{{ number_format($stats['banners'] ?? 0) }}</h2>
                            <p class="mb-0 fs-6">แบนเนอร์สินค้า</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="bg-white bg-opacity-20 rounded-circle p-3">
                                <i class="fas fa-image fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- รวมทั้งหมด -->
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="card bg-gradient-warning text-white h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h2 class="mb-1 fw-bold">{{ number_format(array_sum($stats ?? [])) }}</h2>
                            <p class="mb-0 fs-6">รวมทั้งหมด</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="bg-white bg-opacity-20 rounded-circle p-3">
                                <i class="fas fa-chart-pie fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- สถิติสินค้าตามประเภท -->
    @if(!empty($contentTypes))
    <div class="row g-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light border-0">
                    <h5 class="card-title mb-0 text-dark">
                        <i class="fas fa-tags text-primary me-2"></i>
                        สินค้าตามประเภท
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        @foreach($contentTypes as $type => $count)
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="card border-0 h-100 product-type-card">
                                <div class="card-body text-center p-4">
                                    <div class="mb-3">
                                        <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                            <i class="fas fa-tag fa-lg text-primary"></i>
                                        </div>
                                    </div>
                                    <h4 class="fw-bold text-primary mb-1">{{ number_format($count) }}</h4>
                                    <p class="text-muted mb-0 text-capitalize">{{ $type }}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- แผนแท่งแสดงสินค้าตามหมวดหมู่ -->
    @if(!empty($contentTypes))
    <div class="row g-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light border-0">
                    <h5 class="card-title mb-0 text-dark">
                        <i class="fas fa-chart-bar text-primary me-2"></i>
                        แผนแท่งแสดงสินค้าตามหมวดหมู่
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-12">
                            <canvas id="productCategoryChart" height="100"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- สถิติสินค้าตามสถานะ -->
    @if(!empty($contentStatus))
    <div class="row g-4">
        @foreach($contentStatus as $status => $count)
        <div class="col-lg-6 col-md-6">
            <div class="card border-0 h-100 shadow-sm status-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0 me-4">
                            <div class="bg-{{ $status == 1 ? 'success' : 'danger' }} bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-{{ $status == 1 ? 'check-circle' : 'times-circle' }} fa-2x text-{{ $status == 1 ? 'success' : 'danger' }}"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <h3 class="fw-bold text-{{ $status == 1 ? 'success' : 'danger' }} mb-1">{{ number_format($count) }}</h3>
                            <p class="text-muted mb-0 fs-6">{{ $status == 1 ? 'สินค้าพร้อมขาย' : 'สินค้าปิดการขาย' }}</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="badge bg-{{ $status == 1 ? 'success' : 'danger' }} bg-opacity-20 text-{{ $status == 1 ? 'success' : 'danger' }} px-3 py-2">
                                {{ $status == 1 ? 'พร้อมขาย' : 'ปิดขาย' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @endif
@endsection

@section('scripts')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

<script>
console.log('Chart.js loaded');
console.log('Content types from Blade:', @json($contentTypes ?? []));
console.log('Content types raw:', {!! json_encode($contentTypes ?? []) !!});

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded');
    
    // ข้อมูลสำหรับแผนแท่ง
    const contentTypes = {!! json_encode($contentTypes ?? []) !!};
    console.log('Content types from PHP:', contentTypes);
    console.log('Content types type:', typeof contentTypes);
    console.log('Content types keys:', Object.keys(contentTypes));
    
    // ตรวจสอบว่ามีข้อมูลหรือไม่
    if (Object.keys(contentTypes).length > 0) {
        console.log('Creating chart with data:', contentTypes);
        
        const ctx = document.getElementById('productCategoryChart');
        if (!ctx) {
            console.error('Canvas element not found');
            return;
        }
        
        console.log('Canvas found:', ctx);
        
        // สร้างสีแบบไล่โทน
        const colors = [
            'rgba(102, 126, 234, 0.8)',
            'rgba(17, 153, 142, 0.8)',
            'rgba(240, 147, 251, 0.8)',
            'rgba(255, 99, 132, 0.8)',
            'rgba(54, 162, 235, 0.8)',
            'rgba(255, 205, 86, 0.8)',
            'rgba(75, 192, 192, 0.8)',
            'rgba(153, 102, 255, 0.8)'
        ];
        
        const borderColors = [
            'rgba(102, 126, 234, 1)',
            'rgba(17, 153, 142, 1)',
            'rgba(240, 147, 251, 1)',
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 205, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)'
        ];
        
        const labels = Object.keys(contentTypes).map(type => type.charAt(0).toUpperCase() + type.slice(1));
        const data = Object.values(contentTypes);
        
        console.log('Labels:', labels);
        console.log('Data:', data);
        
        try {
            const chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'จำนวนสินค้า',
                        data: data,
                        backgroundColor: colors.slice(0, labels.length),
                        borderColor: borderColors.slice(0, labels.length),
                        borderWidth: 2,
                        borderRadius: 8,
                        borderSkipped: false,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            borderColor: 'rgba(255, 255, 255, 0.1)',
                            borderWidth: 1,
                            cornerRadius: 8,
                            displayColors: false,
                            callbacks: {
                                title: function(context) {
                                    return 'หมวดหมู่: ' + context[0].label;
                                },
                                label: function(context) {
                                    return 'จำนวนสินค้า: ' + context.parsed.y.toLocaleString() + ' รายการ';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#6c757d',
                                font: {
                                    size: 12
                                },
                                callback: function(value) {
                                    return value.toLocaleString();
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#6c757d',
                                font: {
                                    size: 12
                                }
                            }
                        }
                    },
                    animation: {
                        duration: 2000,
                        easing: 'easeInOutQuart'
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
            
            console.log('Chart created successfully:', chart);
        } catch (error) {
            console.error('Error creating chart:', error);
        }
    } else {
        console.log('No content types data available');
        
        // แสดงข้อความเมื่อไม่มีข้อมูล
        const canvas = document.getElementById('productCategoryChart');
        if (canvas) {
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = '#6c757d';
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('ไม่มีข้อมูลหมวดหมู่สินค้า', canvas.width / 2, canvas.height / 2);
        }
    }
});
</script>
@endsection

@section('styles')
<style>
/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.bg-gradient-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Card Styles */
.card {
    transition: all 0.3s ease;
    border: none;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
}

/* Product Type Cards */
.product-type-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.product-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: #007bff;
}

/* Status Cards */
.status-card {
    transition: all 0.3s ease;
}

.status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Icon Backgrounds */
.bg-white.bg-opacity-20 {
    background-color: rgba(255,255,255,0.2) !important;
}

.bg-success.bg-opacity-10 {
    background-color: rgba(25,135,84,0.1) !important;
}

.bg-danger.bg-opacity-10 {
    background-color: rgba(220,53,69,0.1) !important;
}

.bg-primary.bg-opacity-20 {
    background-color: rgba(13,110,253,0.2) !important;
}

.bg-success.bg-opacity-20 {
    background-color: rgba(25,135,84,0.2) !important;
}

.bg-danger.bg-opacity-20 {
    background-color: rgba(220,53,69,0.2) !important;
}

/* Typography */
.fw-bold {
    font-weight: 700 !important;
}

.fs-6 {
    font-size: 0.875rem !important;
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeInUp 0.6s ease-out;
}

/* Chart Container */
#productCategoryChart {
    max-height: 400px;
}

/* Chart Card */
.chart-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem !important;
    }
    
    .bg-white.bg-opacity-20 {
        padding: 0.75rem !important;
    }
    
    #productCategoryChart {
        max-height: 300px;
    }
}
</style>
@endsection