@extends('layouts.admin', ['title' => 'ملف المنتج 360'])

@php
    $fmt = fn ($minor) => number_format(($minor ?? 0) / 100, 2).' EGP';
    $price = $product->sale_price_minor ?: $product->price_minor;
    $margin = $price > 0 ? (($price - $product->cost_minor) / $price) * 100 : 0;
    $chart = [
        'labels' => $dailySales->pluck('day'),
        'series' => [
            ['name' => 'الكمية', 'data' => $dailySales->pluck('quantity')->map(fn ($v) => (int) $v)->values()],
            ['name' => 'الإيراد', 'data' => $dailySales->pluck('revenue_minor')->map(fn ($v) => round(((int) $v) / 100, 2))->values()],
        ],
    ];
@endphp

@section('content')
    <section class="ac-section">
        <div class="ac-panel ac-product-hero">
            <div class="ac-panel-head">
                <div>
                    <h2>{{ $product->name_ar }}</h2>
                    <p>{{ $product->name_en }} · {{ $product->sku }} · {{ $product->game?->name_ar }}</p>
                </div>
                <div class="ac-actions">
                    <a class="ac-btn secondary" href="{{ route('admin.products.edit', $product) }}">تعديل كامل</a>
                    <a class="ac-btn secondary" href="{{ route('products.show', $product) }}" target="_blank">عرض في المتجر</a>
                </div>
            </div>

            <div class="ac-kpi-grid ac-gradient-grid">
                <div class="ac-kpi gradient teal"><span>السعر الحالي</span><strong>{{ $fmt($price) }}</strong><small>قبل التحويلات</small></div>
                <div class="ac-kpi gradient orange"><span>الهامش</span><strong>{{ number_format($margin, 1) }}%</strong><small>فرق البيع والتكلفة</small></div>
                <div class="ac-kpi gradient blue"><span>المخزون</span><strong>{{ number_format($product->stock_available) }}</strong><small>حد التنبيه {{ $product->min_stock_alert }}</small></div>
                <div class="ac-kpi gradient pink"><span>المشاهدات</span><strong>{{ number_format($views) }}</strong><small>من تتبع المنتج</small></div>
            </div>
        </div>

        <div class="ac-grid-3">
            <div class="ac-panel">
                <div class="ac-panel-head"><h2>إجراءات سريعة</h2></div>
                <form method="POST" action="{{ route('admin.products.quick-update', $product) }}" class="ac-form-grid">
                    @csrf
                    @method('PATCH')
                    <label>المخزون<input type="number" min="0" name="stock_available" value="{{ $product->stock_available }}"></label>
                    <label>حد التنبيه<input type="number" min="0" name="min_stock_alert" value="{{ $product->min_stock_alert }}"></label>
                    <label>الحالة
                        <select name="status">
                            <option value="active" @selected($product->status === 'active')>مفعل</option>
                            <option value="inactive" @selected($product->status === 'inactive')>معطل</option>
                        </select>
                    </label>
                    <label class="ac-check"><input type="checkbox" name="is_featured" value="1" @checked($product->is_featured)> مميز</label>
                    <label class="ac-check"><input type="checkbox" name="is_best_seller" value="1" @checked($product->is_best_seller)> الأكثر مبيعًا</label>
                    <button class="ac-btn" style="grid-column:1/-1">حفظ سريع</button>
                </form>
            </div>

            <div class="ac-panel">
                <div class="ac-panel-head"><h2>مبيعات المنتج</h2></div>
                <div class="ac-list">
                    <div class="ac-list-row"><span>عدد الطلبات</span><strong>{{ number_format($sales->orders_count ?? 0) }}</strong><em>طلب</em></div>
                    <div class="ac-list-row"><span>الكمية المباعة</span><strong>{{ number_format($sales->quantity ?? 0) }}</strong><em>قطعة</em></div>
                    <div class="ac-list-row"><span>إيراد المنتج</span><strong>{{ $fmt($sales->revenue_minor ?? 0) }}</strong><em>إجمالي</em></div>
                </div>
            </div>

            <div class="ac-panel">
                <div class="ac-panel-head"><h2>أكواد المخزون</h2></div>
                <div class="ac-list">
                    @forelse($stockBreakdown as $status => $total)
                        <div class="ac-list-row"><span>{{ $status }}</span><strong>{{ number_format($total) }}</strong><em>كود</em></div>
                    @empty
                        <div class="ac-empty">لا توجد أكواد مربوطة بهذا المنتج.</div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="ac-grid-2">
            <div class="ac-panel">
                <div class="ac-panel-head"><h2>أداء آخر 14 يوم</h2></div>
                <script type="application/json" data-admin-chart-source="product-sales">@json($chart)</script>
                <div class="ac-chart" data-admin-chart="product-sales" data-chart-type="area"></div>
            </div>

            <div class="ac-panel">
                <div class="ac-panel-head"><h2>آخر مبيعات المنتج</h2></div>
                <div class="ac-table-wrap">
                    <table class="ac-table">
                        <thead><tr><th>الطلب</th><th>العميل</th><th>الكمية</th><th>الإجمالي</th><th>التنفيذ</th></tr></thead>
                        <tbody>
                            @forelse($recentItems as $item)
                                <tr>
                                    <td><a href="{{ route('admin.orders.show', $item->order) }}">{{ $item->order?->order_number }}</a></td>
                                    <td>{{ $item->order?->customer_name }}</td>
                                    <td>{{ $item->quantity }}</td>
                                    <td>{{ $fmt($item->total_minor) }}</td>
                                    <td><span class="ac-badge blue">{{ $item->fulfillment_status }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="5"><div class="ac-empty">لا توجد مبيعات لهذا المنتج بعد.</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection