@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>تقارير المبيعات</h1>
        <div>
            <button type="button" class="btn btn-outline-secondary me-2" id="printReport">
                <i class="fas fa-print"></i> طباعة
            </button>
            <button type="button" class="btn btn-outline-primary" id="exportReport">
                <i class="fas fa-file-export"></i> تصدير
            </button>
        </div>
    </div>
    
    <!-- Filter Form -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title">خيارات التصفية</h5>
        </div>
        <div class="card-body">
            <form id="reportFilterForm">
                <input type="hidden" name="report_type" id="report_type" value="{{ $request->report_type ?? 'daily' }}">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label for="date_range" class="form-label">الفترة الزمنية</label>
                        <select class="form-select" id="date_range" name="date_range">
                            <option value="today">اليوم</option>
                            <option value="yesterday">الأمس</option>
                            <option value="this_week">هذا الأسبوع</option>
                            <option value="last_week">الأسبوع الماضي</option>
                            <option value="this_month" selected>هذا الشهر</option>
                            <option value="last_month">الشهر الماضي</option>
                            <option value="this_year">هذه السنة</option>
                            <option value="custom">مخصص</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3 custom-date d-none">
                        <label for="start_date" class="form-label">من تاريخ</label>
                        <input type="date" class="form-control" id="start_date" name="start_date">
                    </div>
                    
                    <div class="col-md-3 mb-3 custom-date d-none">
                        <label for="end_date" class="form-label">إلى تاريخ</label>
                        <input type="date" class="form-control" id="end_date" name="end_date">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="category_id" class="form-label">التصنيف</label>
                        <select class="form-select" id="category_id" name="category_id">
                            <option value="">جميع التصنيفات</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="payment_method" class="form-label">طريقة الدفع</label>
                        <select class="form-select" id="payment_method" name="payment_method">
                            <option value="">جميع الطرق</option>
                            <option value="cash">نقدي</option>
                            <option value="card">بطاقة</option>
                            <option value="online">دفع إلكتروني</option>
                        </select>
                    </div>
                    
                    <div class="col-md-12 text-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> عرض التقرير
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">إجمالي المبيعات</h5>
                    <h3 class="card-text" id="total_sales">{{ $summary['total_sales'] ?? 0 }} ر.س</h3>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 mb-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">عدد الطلبات</h5>
                    <h3 class="card-text" id="total_orders">{{ $summary['total_orders'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 mb-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5 class="card-title">متوسط قيمة الطلب</h5>
                    <h3 class="card-text" id="average_order">{{ $summary['average_order'] ?? 0 }} ر.س</h3>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 mb-3">
            <div class="card bg-warning text-dark">
                <div class="card-body">
                    <h5 class="card-title">إجمالي الضرائب</h5>
                    <h3 class="card-text" id="total_tax">{{ $summary['total_tax'] ?? 0 }} ر.س</h3>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sales Chart -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title">رسم بياني للمبيعات</h5>
        </div>
        <div class="card-body">
            <div class="btn-group mb-3" role="group">
                <button type="button" class="btn btn-outline-primary active" data-chart-view="daily">يومي</button>
                <button type="button" class="btn btn-outline-primary" data-chart-view="weekly">أسبوعي</button>
                <button type="button" class="btn btn-outline-primary" data-chart-view="monthly">شهري</button>
            </div>
            <div style="height: 300px;">
                <canvas id="salesChart"></canvas>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- Top Products -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">أفضل المنتجات مبيعاً</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>المنتج</th>
                                    <th>الكمية</th>
                                </tr>
                            </thead>
                            <tbody id="top_products">
                                @foreach($topProducts as $product)
                                    <tr>
                                        <td>{{ $product->product->name }}</td>
                                        <td>{{ $product->quantity }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Payment Methods -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">طرق الدفع</h5>
                </div>
                <div class="card-body">
                    <div style="height: 250px;">
                        <canvas id="paymentMethodChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sales Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">تفاصيل المبيعات</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="salesTable">
                    <thead>
                        <tr>
                            <th>رقم الطلب</th>
                            <th>التاريخ</th>
                            <th>العميل</th>
                            <th>عدد المنتجات</th>
                            <th>المبلغ</th>
                            <th>الضريبة</th>
                            <th>الإجمالي</th>
                            <th>طريقة الدفع</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($orders as $order)
                            <tr>
                                <td>{{ $order->order_number }}</td>
                                <td>{{ $order->created_at->format('Y-m-d H:i') }}</td>
                                <td>{{ $order->customer_name ?? 'عميل' }}</td>
                                <td>{{ $order->items_count }}</td>
                                <td>{{ $order->subtotal }} ر.س</td>
                                <td>{{ $order->tax_amount }} ر.س</td>
                                <td>{{ $order->total }} ر.س</td>
                                <td>
                                    @if($order->payment_method == 'cash')
                                        <span class="badge bg-success">نقدي</span>
                                    @elseif($order->payment_method == 'card')
                                        <span class="badge bg-info">بطاقة</span>
                                    @elseif($order->payment_method == 'online')
                                        <span class="badge bg-primary">دفع إلكتروني</span>
                                    @else
                                        <span class="badge bg-secondary">{{ $order->payment_method }}</span>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('orders.show', $order->id) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <div class="mt-4">
                {{ $orders->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Show/hide custom date fields based on selection
        $('#date_range').change(function() {
            const dateRange = $(this).val();
            
            // Set the report_type based on date_range
            switch(dateRange) {
                case 'today':
                case 'yesterday':
                    $('#report_type').val('daily');
                    break;
                case 'this_week':
                case 'last_week':
                    $('#report_type').val('weekly');
                    break;
                case 'this_month':
                case 'last_month':
                    $('#report_type').val('monthly');
                    break;
                case 'this_year':
                case 'custom':
                    $('#report_type').val('custom');
                    break;
            }
            
            if (dateRange === 'custom') {
                $('.custom-date').removeClass('d-none');
            } else {
                $('.custom-date').addClass('d-none');
            }
        });
        
        // Trigger the date_range change event on page load to set initial report_type
        $('#date_range').trigger('change');
        
        // Initialize charts
        const salesChartCtx = document.getElementById('salesChart').getContext('2d');
        const salesChart = new Chart(salesChartCtx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($chartData['labels'] ?? []) !!},
                datasets: [{
                    label: 'المبيعات',
                    data: {!! json_encode($chartData['data'] ?? []) !!},
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        // Payment method chart
        const paymentChartCtx = document.getElementById('paymentMethodChart').getContext('2d');
        const paymentChart = new Chart(paymentChartCtx, {
            type: 'pie',
            data: {
                labels: ['نقدي', 'بطاقة', 'دفع إلكتروني'],
                datasets: [{
                    data: [
                        {{ is_array($paymentMethods['cash'] ?? null) ? ($paymentMethods['cash']['count'] ?? 0) : ($paymentMethods['cash'] ?? 0) }},
                        {{ is_array($paymentMethods['card'] ?? null) ? ($paymentMethods['card']['count'] ?? 0) : ($paymentMethods['card'] ?? 0) }},
                        {{ is_array($paymentMethods['online'] ?? null) ? ($paymentMethods['online']['count'] ?? 0) : ($paymentMethods['online'] ?? 0) }}
                    ],
                    backgroundColor: [
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(153, 102, 255, 0.7)'
                    ],
                    borderColor: [
                        'rgba(75, 192, 192, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // Handle chart view changes
        $('[data-chart-view]').click(function() {
            const view = $(this).data('chart-view');
            $('[data-chart-view]').removeClass('active');
            $(this).addClass('active');
            
            // AJAX request to get new chart data
            $.ajax({
                url: '{{ route("reports.sales.chart") }}',
                type: 'GET',
                data: {
                    view: view,
                    date_range: $('#date_range').val(),
                    start_date: $('#start_date').val(),
                    end_date: $('#end_date').val(),
                    category_id: $('#category_id').val(),
                    payment_method: $('#payment_method').val()
                },
                success: function(response) {
                    // Update chart data
                    salesChart.data.labels = response.labels;
                    salesChart.data.datasets[0].data = response.data;
                    salesChart.update();
                },
                error: function(error) {
                    console.error('Error fetching chart data:', error);
                }
            });
        });
        
        // Handle report filter form submission
        $('#reportFilterForm').submit(function(e) {
            e.preventDefault();
            
            $.ajax({
                url: '{{ route("reports.sales.filter") }}',
                type: 'GET',
                data: $(this).serialize(),
                success: function(response) {
                    // Update summary cards
                    $('#total_sales').text(response.summary.total_sales + ' ر.س');
                    $('#total_orders').text(response.summary.total_orders);
                    $('#average_order').text(response.summary.average_order + ' ر.س');
                    $('#total_tax').text(response.summary.total_tax + ' ر.س');
                    
                    // Update charts
                    salesChart.data.labels = response.chartData.labels;
                    salesChart.data.datasets[0].data = response.chartData.data;
                    salesChart.update();
                    
                    // Update payment chart
                    paymentChart.data.datasets[0].data = [
                        response.paymentMethods.cash,
                        response.paymentMethods.card,
                        response.paymentMethods.online
                    ];
                    paymentChart.update();
                    
                    // Update top products table
                    let topProductsHtml = '';
                    response.topProducts.forEach(function(product) {
                        topProductsHtml += `
                            <tr>
                                <td>${product.name}</td>
                                <td>${product.quantity}</td>
                                <td>${product.total} ر.س</td>
                            </tr>
                        `;
                    });
                    $('#top_products').html(topProductsHtml);
                    
                    // Update sales table
                    let salesTableHtml = '';
                    response.orders.data.forEach(function(order) {
                        let paymentBadge = '';
                        if (order.payment_method === 'cash') {
                            paymentBadge = '<span class="badge bg-success">نقدي</span>';
                        } else if (order.payment_method === 'card') {
                            paymentBadge = '<span class="badge bg-info">بطاقة</span>';
                        } else if (order.payment_method === 'online') {
                            paymentBadge = '<span class="badge bg-primary">دفع إلكتروني</span>';
                        } else {
                            paymentBadge = `<span class="badge bg-secondary">${order.payment_method}</span>`;
                        }
                        
                        salesTableHtml += `
                            <tr>
                                <td>${order.order_number}</td>
                                <td>${order.created_at}</td>
                                <td>${order.customer_name || 'عميل'}</td>
                                <td>${order.items_count}</td>
                                <td>${order.subtotal} ر.س</td>
                                <td>${order.tax_amount} ر.س</td>
                                <td>${order.total} ر.س</td>
                                <td>${paymentBadge}</td>
                                <td>
                                    <a href="/orders/${order.id}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        `;
                    });
                    $('#salesTable tbody').html(salesTableHtml);
                    
                    // Handle pagination links
                    // This would require a more complex implementation
                },
                error: function(error) {
                    console.error('Error filtering report:', error);
                }
            });
        });
        
        // Print report
        $('#printReport').click(function() {
            window.print();
        });
        
        // Export report
        $('#exportReport').click(function() {
            const params = $('#reportFilterForm').serialize();
            window.location.href = `{{ route('reports.sales.export') }}?${params}`;
        });
    });
</script>
@endpush