@extends('layouts.app')
@section('title', __('dashboard.Loyalty Points'))
@section('page_heading', __('dashboard.Loyalty Points'))

@section('content')
@php
    $earnedPoints    = $transactions->where('points_amount', '>', 0)->sum('points_amount');
    $spentPoints     = abs($transactions->where('points_amount', '<', 0)->sum('points_amount'));
    $activeCustomers = $transactions->pluck('user_id')->unique()->count();
    $typeBadge = [
        'earned'     => ['#f0fdf4','#16a34a'],
        'spent'      => ['#fef2f2','#dc2626'],
        'expired'    => ['#fffbeb','#d97706'],
        'adjustment' => ['#eff6ff','#2563eb'],
    ];
@endphp

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-circle-arrow-up',  '#f0fdf4','#16a34a', number_format($earnedPoints),          'النقاط المكتسبة'],
        ['fa-solid fa-circle-arrow-down','#fef2f2','#dc2626', number_format($spentPoints),            'النقاط المصروفة'],
        ['fa-solid fa-users',           '#eff6ff','#2563eb', number_format($activeCustomers),        'عملاء نشطون'],
        ['fa-solid fa-list-check',            '#fffbeb','#d97706', number_format($transactions->total()),  'إجمالي الحركات'],
    ] as [$icon,$bg,$color,$val,$lbl])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--shadow-card)">
        <div style="width:42px;height:42px;border-radius:12px;flex-shrink:0;background:{{ $bg }};color:{{ $color }};display:flex;align-items:center;justify-content:center;font-size:1.05rem">
            <i class="{{ $icon }}"></i>
        </div>
        <div>
            <div style="font-size:1.35rem;font-weight:900;color:var(--text-primary);line-height:1">{{ $val }}</div>
            <div style="font-size:.7rem;font-weight:700;color:var(--text-muted);margin-top:.2rem">{{ $lbl }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Shell --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">

    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-clock-rotate-left" style="color:var(--c-primary)"></i>
            {{ __('dashboard.Loyalty Point Transactions') }}
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ number_format($transactions->total()) }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem">
            <a href="{{ route('dashboard.loyalty.cards') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-ticket me-1"></i>كروت الولاء
            </a>
            <a href="{{ route('dashboard.loyalty.settings') }}" class="app-btn app-btn--primary app-btn--sm">
                <i class="fa-solid fa-gear me-1"></i>{{ __('dashboard.Loyalty Settings') }}
            </a>
        </div>
    </div>

    @if($transactions->isEmpty())
        <div style="padding:3rem;text-align:center">
            @include('layouts.partials.index-empty-state', ['icon'=>'fa-solid fa-clock-rotate-left','title'=>__('dashboard.No transactions found'),'message'=>''])
        </div>
    @else
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse: collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach([__('dashboard.Customer'),__('dashboard.Points'),__('dashboard.Type'),__('dashboard.Reference'),'الصلاحية',__('dashboard.Description')] as $h)
                    <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start;white-space:nowrap">{{ $h }}</th>
                    @endforeach
                    <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:end;white-space:nowrap">{{ __('dashboard.Date') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($transactions as $tx)
                @php [$bg,$color] = $typeBadge[$tx->transaction_type] ?? ['#eff6ff','#2563eb']; @endphp
                <tr style="border-top:1px solid var(--border-subtle)" onmouseover="this.style.background='var(--border-subtle)'" onmouseout="this.style.background=''">
                    <td style="padding:.875rem 1.25rem">
                        <div style="display:flex;align-items:center;gap:.5rem">
                            <div style="width:30px;height:30px;border-radius:8px;flex-shrink:0;background:#f0fdf4;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900">{{ mb_substr($tx->user->name,0,1) }}</div>
                            <div>
                                <a href="{{ route('dashboard.customers.show', $tx->user->id) }}" style="font-weight:800;font-size:.85rem;color:var(--text-primary);text-decoration:none">{{ $tx->user->name }}</a>
                                <div style="font-size:.7rem;color:var(--text-muted)">{{ $tx->user->phone }}</div>
                            </div>
                        </div>
                    </td>
                    <td style="padding:.875rem 1.25rem;font-size:.82rem;font-weight:900;color:{{ $tx->points_amount > 0 ? '#16a34a' : '#dc2626' }}">
                        {{ $tx->points_amount > 0 ? '+' : '' }}{{ number_format($tx->points_amount) }}
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:{{ $bg }};color:{{ $color }}">
                            {{ __("dashboard.loyalty_type_{$tx->transaction_type}") }}
                        </span>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @if($tx->reference_type === 'Sale')
                            <a href="{{ route('dashboard.sales.show', $tx->reference_id) }}" style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:8px;font-size:.72rem;font-weight:800;text-decoration:none;background:#eff6ff;color:#2563eb">بيع #{{ $tx->reference_id }}</a>
                        @elseif($tx->reference_type === 'Reservation')
                            <a href="{{ route('dashboard.reservations.show', $tx->reference_id) }}" style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:8px;font-size:.72rem;font-weight:800;text-decoration:none;background:#fffbeb;color:#d97706">حجز #{{ $tx->reference_id }}</a>
                        @elseif($tx->reference_type === \App\Models\LoyaltyCard::class)
                            <span style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:8px;font-size:.72rem;font-weight:800;background:#f0fdfa;color:#0d9488">كرت: {{ $tx->loyaltyCard?->code ?? ('#'.$tx->reference_id) }}</span>
                        @else
                            <span style="color:var(--text-muted)">—</span>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @if($tx->expires_at)
                            <span style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:#fffbeb;color:#d97706">{{ $tx->expires_at->format('Y-m-d') }}</span>
                        @else
                            <span style="font-size:.75rem;color:var(--text-muted)">بدون انتهاء</span>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem;font-size:.78rem;color:var(--text-muted);max-width:180px">
                        {{ $tx->description }}
                        @if($tx->loyaltyCardBatch)
                            <div style="font-size:.7rem">دفعة: {{ $tx->loyaltyCardBatch->title }}</div>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem;text-align:end;font-size:.75rem;color:var(--text-muted);white-space:nowrap">
                        {{ $tx->created_at->format('Y-m-d H:i') }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $transactions->links() }}
    </div>
    @endif
</div>
@endsection