@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>{{ $product->name }}</h1>
        <div>
            <a href="{{ route('products.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-right"></i> العودة للمنتجات
            </a>
            <a href="{{ route('products.edit', $product) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> تعديل
            </a>
            @if($product->is_stock_tracked)
            <a href="{{ route('products.stock-intake.form', $product) }}" class="btn btn-success">
                <i class="fas fa-plus"></i> إضافة مخزون
            </a>
            @endif
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">معلومات المنتج</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">الاسم:</label>
                                <p>{{ $product->name }}</p>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">التصنيف:</label>
                                <p>{{ $product->category->name }}</p>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">السعر:</label>
                                <p>{{ number_format($product->price, 2) }} ريال</p>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">التكلفة:</label>
                                <p>{{ $product->cost ? number_format($product->cost, 2) . ' ريال' : 'غير محدد' }}</p>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">رمز المنتج (SKU):</label>
                                <p>{{ $product->sku ?: 'غير محدد' }}</p>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">الباركود:</label>
                                <p>{{ $product->barcode ?: 'غير محدد' }}</p>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">الطابعة:</label>
                                <p>{{ $product->printer ? $product->printer->name : 'غير محدد' }}</p>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">المخزون:</label>
                                @if($product->is_stock_tracked)
                                    <p class="mb-1">
                                        الكمية الحالية: 
                                        <span class="badge bg-{{ $product->isLowStock() ? 'warning text-dark' : 'secondary' }}">{{ $product->stock_quantity }}</span>
                                    </p>
                                    <p class="mb-1">حد إعادة الطلب: {{ $product->reorder_level ?? 'غير محدد' }}</p>
                                    @if($product->isLowStock())
                                        <div class="alert alert-warning py-2 mb-0">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            المخزون منخفض. يُنصح بإعادة الطلب.
                                        </div>
                                    @endif
                                @else
                                    <p class="text-muted">غير متتبع</p>
                                @endif
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">الحالة:</label>
                                <p>
                                    @if($product->is_available)
                                        <span class="badge bg-success">متاح</span>
                                    @else
                                        <span class="badge bg-danger">غير متاح</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">الوصف:</label>
                        <p>{{ $product->description ?: 'لا يوجد وصف' }}</p>
                    </div>
                    
                    @if($product->options && count($product->options) > 0)
                        <div class="card bg-light mt-3">
                            <div class="card-body">
                                <h6 class="card-title">خيارات المنتج</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>الاسم</th>
                                                <th>السعر الإضافي</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($product->options as $option)
                                                <tr>
                                                    <td>{{ $option['name'] }}</td>
                                                    <td>{{ number_format($option['price'], 2) }} ريال</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title">إحصائيات المبيعات</h5>
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="sales-week">أسبوع</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="sales-month">شهر</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary active" id="sales-year">سنة</button>
                    </div>
                </div>
                <div class="card-body">
                    <canvas id="salesChart" height="200"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">صورة المنتج</h5>
                </div>
                <div class="card-body text-center">
                    @if($product->image)
                        <img src="{{ Storage::disk('public')->url($product->image) }}" alt="{{ $product->name }}" class="img-fluid rounded">
                    @else
                        <div class="bg-light d-flex justify-content-center align-items-center py-5">
                            <i class="fas fa-coffee fa-5x text-muted"></i>
                        </div>
                        <p class="text-muted mt-3">لا توجد صورة للمنتج</p>
                    @endif
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">ملخص المبيعات</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            إجمالي المبيعات (اليوم)
                            <span class="badge bg-primary rounded-pill">{{ $todaySales }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            إجمالي المبيعات (الأسبوع)
                            <span class="badge bg-primary rounded-pill">{{ $weeklySales }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            إجمالي المبيعات (الشهر)
                            <span class="badge bg-primary rounded-pill">{{ $monthlySales }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            متوسط المبيعات اليومي
                            <span class="badge bg-info rounded-pill">{{ $averageDailySales }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            آخر بيع
                            <span>{{ $lastSale ? $lastSale->format('Y-m-d H:i') : 'لا يوجد' }}</span>
                        </li>
                    </ul>
                </div>
                <div class="card-footer">
                    <a href="{{ route('orders.index', ['product_id' => $product->id]) }}" class="btn btn-outline-primary w-100">
                        <i class="fas fa-list"></i> عرض جميع الطلبات
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function() {
        // Sample data - replace with actual data from your backend
        const yearlyData = {
            labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
            datasets: [{
                label: 'المبيعات',
                data: {{ json_encode($yearlySalesData) }},
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        };
        
        const monthlyData = {
            labels: Array.from({length: 30}, (_, i) => i + 1),
            datasets: [{
                label: 'المبيعات',
                data: {{ json_encode($monthlySalesData) }},
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        };
        
        const weeklyData = {
            labels: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
            datasets: [{
                label: 'المبيعات',
                data: {{ json_encode($weeklySalesData) }},
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };
        
        // Create chart
        const ctx = document.getElementById('salesChart').getContext('2d');
        let salesChart = new Chart(ctx, {
            type: 'bar',
            data: yearlyData,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // Switch between time periods
        $('#sales-week').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            salesChart.data = weeklyData;
            salesChart.update();
        });
        
        $('#sales-month').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            salesChart.data = monthlyData;
            salesChart.update();
        });
        
        $('#sales-year').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            salesChart.data = yearlyData;
            salesChart.update();
        });
    });
</script>
@endpush