@extends('admin.layouts.master')

@section('title', 'تقرير المبيعات (الألعاب والمنتجات)')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">تقرير المبيعات - إجمالي بكل عملة لكل لعبة ولكل منتج (حسب اليوم)
                    </h4>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-primary" onclick="window.print()">
                            <x-lucide-printer width="20" height="20" class="me-1" /> طباعة
                        </button>
                        <a href="{{ route('admin.reports.users.index') }}" class="btn btn-secondary">تقارير المستخدمين</a>
                    </div>
                </div>
                <div class="card-body">
                    <style>
                        .table thead th {
                            position: sticky;
                            top: 0;
                            z-index: 1;
                            background: #f8f9fa;
                        }

                        .text-num {
                            direction: ltr;
                            text-align: right;
                            font-variant-numeric: tabular-nums;
                        }

                        .chip {
                            display: inline-flex;
                            align-items: center;
                            gap: .35rem;
                            padding: .25rem .5rem;
                            border-radius: 999px;
                            background: #f1f3f5;
                            margin: 0 .25rem .25rem 0;
                            font-size: .875rem;
                        }

                        .chip .x {
                            cursor: pointer;
                            color: #6c757d;
                        }

                        .summary-card {
                            background: #f9fbfd;
                            border: 1px solid #eef2f7;
                            border-radius: .5rem;
                            padding: .75rem 1rem;
                        }

                        .currency-badge {
                            border: 1px solid #e9ecef;
                            background: #fff;
                            padding: .35rem .6rem;
                            border-radius: 999px;
                            font-weight: 600;
                            margin: .25rem;
                            display: inline-flex;
                            gap: .5rem;
                            align-items: baseline;
                        }

                        .currency-badge .val {
                            color: #0d6efd;
                            direction: ltr;
                        }

                        .table tbody tr:hover {
                            background-color: #fcfcfd;
                        }

                        .table td,
                        .table th {
                            vertical-align: middle;
                        }

                        .w-day {
                            width: 120px;
                        }

                        .w-game,
                        .w-product {
                            min-width: 160px;
                        }

                        .w-curr {
                            width: 90px;
                        }

                        .w-count {
                            width: 120px;
                        }

                        .w-total {
                            width: 160px;
                        }
                    </style>

                    @php
                        $totalOrders = $rows->sum('orders_count');
                        $totalSales = $rows->sum('total_sales');
                        $totalsByCurrency = $rows->groupBy('currency_symbol')->map->sum('total_sales');
                        // Stable color classes for currencies
                        $palette = ['primary', 'success', 'info', 'warning', 'danger', 'dark'];
                        $colorFor = function ($sym) use ($palette) {
                            $idx = abs(crc32((string) $sym)) % count($palette);
                            return $palette[$idx];
                        };
                    @endphp

                    {{-- Filter chips (quick view of active filters) --}}
                    <div class="mb-3">
                        @if ($dateFrom)
                            <span class="chip">من: <strong class="text-num">{{ $dateFrom }}</strong></span>
                        @endif
                        @if ($dateTo)
                            <span class="chip">إلى: <strong class="text-num">{{ $dateTo }}</strong></span>
                        @endif
                        @if ($gameId)
                            @php $gSel = $games->firstWhere('id', $gameId); @endphp
                            <span class="chip">لعبة: <strong>{{ $gSel?->name }}</strong></span>
                        @endif
                        @if ($productId)
                            @php $pSel = $products->firstWhere('id', $productId); @endphp
                            <span class="chip">منتج: <strong>{{ $pSel?->name }}</strong></span>
                        @endif
                        @if ($currencyId)
                            @php $cSel = $currencies->firstWhere('id', $currencyId); @endphp
                            <span class="chip">عملة: <strong>{{ $cSel?->symbol }}</strong></span>
                        @endif
                    </div>

                    <form method="GET" action="{{ route('admin.reports.games.index') }}" class="row g-3 mb-4">
                        <div class="col-md-2">
                            <label class="form-label">من تاريخ</label>
                            <input type="date" name="date_from" class="form-control" value="{{ $dateFrom }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">إلى تاريخ</label>
                            <input type="date" name="date_to" class="form-control" value="{{ $dateTo }}">
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">اللعبة</label>
                            <select name="game_id" class="form-select">
                                <option value="">الكل</option>
                                @foreach ($games as $g)
                                    <option value="{{ $g->id }}"
                                        {{ (string) $gameId === (string) $g->id ? 'selected' : '' }}>{{ $g->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">المنتج</label>
                            <select name="product_id" class="form-select">
                                <option value="">الكل</option>
                                @foreach ($products as $p)
                                    <option value="{{ $p->id }}"
                                        {{ (string) $productId === (string) $p->id ? 'selected' : '' }}>
                                        {{ $p->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1">
                            <label class="form-label">العملة</label>
                            <select name="currency_id" class="form-select">
                                <option value="">الكل</option>
                                @foreach ($currencies as $c)
                                    <option value="{{ $c->id }}"
                                        {{ (string) $currencyId === (string) $c->id ? 'selected' : '' }}>
                                        {{ $c->symbol }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 d-flex gap-2 mt-2">
                            <button class="btn btn-primary" type="submit">
                                <x-lucide-filter width="20" height="20" class="me-1" /> تطبيق الفلاتر
                            </button>
                            <a href="{{ route('admin.reports.games.index') }}" class="btn btn-outline-secondary">إعادة
                                تعيين</a>
                        </div>
                    </form>

                    {{-- Summary cards --}}
                    <div class="row mb-4">
                        <div class="col-md-4 mb-3">
                            <div class="summary-card h-100">
                                <div class="text-muted mb-1">إجمالي عدد الطلبات</div>
                                <div class="h5 m-0 text-num">{{ number_format($totalOrders) }}</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="summary-card h-100">
                                <div class="text-muted mb-1">إجمالي المبيعات (كل العملات)</div>
                                <div class="h5 m-0 text-num">{{ number_format($totalSales, 2) }}</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="summary-card h-100">
                                <div class="text-muted mb-2">إجمالي المبيعات حسب العملة</div>
                                <div>
                                    @forelse($totalsByCurrency as $sym => $val)
                                        @php $cls = $colorFor($sym); @endphp
                                        <span class="currency-badge border-{{ $cls }}">
                                            <span class="badge bg-{{ $cls }} me-1">{{ $sym }}</span>
                                            <span class="val">{{ number_format($val, 2) }}</span>
                                        </span>
                                    @empty
                                        <span class="text-muted">لا يوجد بيانات</span>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th class="w-day">اليوم</th>
                                    <th class="w-game">اللعبة</th>
                                    <th class="w-product">المنتج</th>
                                    <th class="w-curr">العملة</th>
                                    <th class="w-count text-end">عدد الطلبات</th>
                                    <th class="w-total text-end">إجمالي المبيعات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $byDay = $rows->groupBy('day'); @endphp
                                @forelse($byDay as $day => $items)
                                    @php
                                        $dayOrders = $items->sum('orders_count');
                                        $daySales = $items->sum('total_sales');
                                        $dayByCurrency = $items->groupBy('currency_symbol')->map->sum('total_sales');
                                    @endphp
                                    <tr class="table-group-row">
                                        <td colspan="6" class="bg-light">
                                            <div class="d-flex flex-wrap align-items-center justify-content-between">
                                                <div class="mb-2 mb-md-0">
                                                    <span class="badge bg-dark me-2">اليوم</span>
                                                    <strong>{{ $day }}</strong>
                                                </div>
                                                <div class="mb-2 mb-md-0">
                                                    @foreach ($dayByCurrency as $sym => $val)
                                                        @php $cls = $colorFor($sym); @endphp
                                                        <span class="currency-badge border-{{ $cls }}">
                                                            <span
                                                                class="badge bg-{{ $cls }} me-1">{{ $sym }}</span>
                                                            <span class="val">{{ number_format($val, 2) }}</span>
                                                        </span>
                                                    @endforeach
                                                </div>
                                                <div>
                                                    <span class="me-3"><small class="text-muted">عدد الطلبات:</small>
                                                        <strong
                                                            class="text-num">{{ number_format($dayOrders) }}</strong></span>
                                                    <span><small class="text-muted">إجمالي اليوم:</small> <strong
                                                            class="text-num">{{ number_format($daySales, 2) }}</strong></span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @foreach ($items as $row)
                                        @php $cls = $colorFor($row->currency_symbol); @endphp
                                        <tr>
                                            <td><span class="badge bg-light text-dark border">{{ $row->day }}</span>
                                            </td>
                                            <td>{{ $row->game_name }}</td>
                                            <td>{{ $row->product_name }}</td>
                                            <td><span
                                                    class="badge bg-{{ $cls }}">{{ $row->currency_symbol }}</span>
                                            </td>
                                            <td class="text-end text-num">{{ number_format($row->orders_count) }}</td>
                                            <td class="fw-bold text-end text-num">
                                                {{ number_format($row->total_sales, 2) }}</td>
                                        </tr>
                                    @endforeach
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5">
                                            <div class="text-muted mb-2"><x-lucide-frown width="32" height="32" /></div>
                                            <div class="text-muted">لا توجد بيانات مطابقة للبحث.</div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                            @if ($rows->count())
                                <tfoot>
                                    <tr class="table-light">
                                        <th colspan="4" class="text-end">الإجمالي</th>
                                        <th class="text-end text-num">{{ number_format($totalOrders) }}</th>
                                        <th class="text-end text-num">{{ number_format($totalSales, 2) }}</th>
                                    </tr>
                                </tfoot>
                            @endif
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection