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


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.loyalty.index') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right"></i> حركات النقاط
    </a>
    <a href="{{ route('dashboard.loyalty.settings') }}" class="app-btn app-btn--primary-soft app-btn--sm">
        <i class="fa-solid fa-gear"></i> إعدادات الولاء
    </a>
</div>

{{-- KPIs --}}
<div class="app-grid gap-4 mb-6">
    @foreach([
        ['icon'=>'fa-solid fa-layer-group',    'bg'=>'#eff6ff','color'=>'#2563eb','val'=>number_format($cardMetrics['total_batches']),   'lbl'=>'دفعات التوليد'],
        ['icon'=>'fa-solid fa-ticket','bg'=>'#f0fdf4','color'=>'#16a34a','val'=>number_format($cardMetrics['total_cards']), 'lbl'=>__('dashboard.total_codes')],
        ['icon'=>'fa-solid fa-circle-check', 'bg'=>'#fffbeb','color'=>'#d97706','val'=>number_format($cardMetrics['redeemed_cards']), 'lbl'=>'الأكواد المستبدلة'],
        ['icon'=>'fa-solid fa-barcode',      'bg'=>'#fef2f2','color'=>'#dc2626','val'=>number_format($cardMetrics['available_cards']),'lbl'=>'الأكواد الجاهزة'],
    ] as $k)
    <div class="col-span-3">
        <div class="app-card">
            <div class="app-card__body flex items-center gap-3 p-4">
                <div class="fin-icon" style="background:{{ $k['bg'] }};color:{{ $k['color'] }}"><i class="{{ $k['icon'] }}"></i></div>
                <div>
                    <div style="font-size:1.4rem;font-weight:900;color:#0f172a">{{ $k['val'] }}</div>
                    <div class="text-slate-500 dark:text-slate-400" style="font-size:.75rem;font-weight:700">{{ $k['lbl'] }}</div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Generate + Redeem --}}
<div class="app-grid gap-5 mb-5">
    <div class="xl:col-span-7">
        <div class="app-card h-full">
            <div class="app-card__header">
                <div class="app-card__title"><i class="fa-solid fa-circle-plus"></i> توليد دفعة كروت جديدة</div>
            </div>
            <div class="app-card__body">
                <form method="POST" action="{{ route('dashboard.loyalty.cards.generate') }}">
                    @csrf
                    <div class="app-grid gap-4">
                        <div class="col-span-12">
                            <label class="app-label">عنوان الدفعة <span class="text-red-600 dark:text-red-400">*</span></label>
                            <input type="text" name="title" class="app-input @error('title') app-input--invalid @enderror" value="{{ old('title') }}" required>
                            @error('title')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>
                        <div class="md:col-span-6">
                            <label class="app-label">الحدث أو المناسبة</label>
                            <input type="text" name="event_name" class="app-input @error('event_name') app-input--invalid @enderror" value="{{ old('event_name') }}">
                            @error('event_name')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>
                        <div class="md:col-span-6">
                            <label class="app-label">بادئة الكود</label>
                            <input type="text" name="code_prefix" class="app-input @error('code_prefix') app-input--invalid @enderror" value="{{ old('code_prefix') }}" placeholder="RAMADAN">
                            @error('code_prefix')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>
                        <div class="md:col-span-4">
                            <label class="app-label">النقاط لكل كرت <span class="text-red-600 dark:text-red-400">*</span></label>
                            <input type="number" min="1" name="points_per_card" class="app-input @error('points_per_card') app-input--invalid @enderror" value="{{ old('points_per_card') }}" required>
                            @error('points_per_card')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>
                        <div class="md:col-span-4">
                            <label class="app-label">عدد الأكواد <span class="text-red-600 dark:text-red-400">*</span></label>
                            <input type="number" min="1" max="5000" name="cards_count" class="app-input @error('cards_count') app-input--invalid @enderror" value="{{ old('cards_count', 100) }}" required>
                            @error('cards_count')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>
                        <div class="md:col-span-4">
                            <label class="app-label">صلاحية النقاط (أيام)</label>
                            <input type="number" min="0" name="points_expiry_days" class="app-input @error('points_expiry_days') app-input--invalid @enderror" value="{{ old('points_expiry_days') }}" placeholder="فارغ = الإعداد العام">
                            @error('points_expiry_days')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-span-12">
                            <label class="app-label">{{ __('dashboard.notes') }}</label>
                            <textarea name="notes" rows="2" class="app-input @error('notes') app-input--invalid @enderror">{{ old('notes') }}</textarea>
                            @error('notes')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-span-12 flex justify-end">
                            <button type="submit" class="app-btn app-btn--primary">توليد الأكواد</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="xl:col-span-5">
        <div class="app-card h-full">
            <div class="app-card__header">
                <div class="app-card__title"><i class="fa-solid fa-barcode"></i> استبدال كرت لعميل</div>
            </div>
            <div class="app-card__body">
                <form method="POST" action="{{ route('dashboard.loyalty.cards.redeem') }}">
                    @csrf
                    <div class="space-y-2">
                        <label class="app-label">العميل <span class="text-red-600 dark:text-red-400">*</span></label>
                        <select name="customer_id" class="app-input app-select @error('customer_id') app-input--invalid @enderror" required>
                            <option value="">اختر العميل</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" @selected(old('customer_id')==$customer->id)>
                                    {{ $customer->name }} — {{ $customer->phone }} — {{ number_format($customer->loyalty_points) }} نقطة
                                </option>
                            @endforeach
                        </select>
                        @error('customer_id')<div class="app-field-error">{{ $message }}</div>@enderror
                    </div>
                    <div class="space-y-2">
                        <label class="app-label">كود الكرت <span class="text-red-600 dark:text-red-400">*</span></label>
                        <input type="text" name="code" class="app-input @error('code') app-input--invalid @enderror" value="{{ old('code') }}" required>
                        @error('code')<div class="app-field-error">{{ $message }}</div>@enderror
                    </div>
                    <div class="flex justify-end mt-2">
                        <button type="submit" class="app-btn app-btn--success">استبدال وإضافة النقاط</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Batches --}}
<div class="app-card mb-5">
    <div class="app-card__header">
        <div class="app-card__title"><i class="fa-solid fa-folder-tree"></i> دفعات التوليد</div>
        <span class="app-badge app-badge--primary">{{ $batches->total() }} دفعة</span>
    </div>
    <div class="loyalty-table-section">
            <table class="app-table loyalty-table">
                <thead><tr>
                    <th>العنوان</th>
                    <th>الحدث</th>
                    <th>النقاط/كرت</th>
                    <th>المولد</th>
                    <th>الأكواد</th>
                    <th>الصلاحية</th>
                    <th>التاريخ</th>
                </tr></thead>
                <tbody>
                    @forelse($batches as $b)
                    <tr>
                        <td>
                            <div class="font-bold">{{ $b->title }}</div>
                            @if($b->notes)<div class="text-slate-500 dark:text-slate-400" style="font-size:.72rem">{{ $b->notes }}</div>@endif
                        </td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $b->event_name??'—' }}</td>
                        <td class="font-black">{{ number_format($b->points_per_card) }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $b->creator?->name??'—' }}</td>
                        <td>
                            <span class="app-badge app-badge--primary me-1">{{ number_format($b->generated_cards_count) }} مولد</span>
                            <span class="app-badge app-badge--success">{{ number_format($b->redeemed_cards_count) }} مستبدل</span>
                        </td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $b->points_expiry_days?$b->points_expiry_days.' يوم':'بدون انتهاء' }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $b->created_at->format('Y-m-d') }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="7">@include('layouts.partials.empty-table-state', ['message'=>'لا توجد دفعات بعد'])</td></tr>
                    @endforelse
                </tbody>
            </table>
        @if($batches->hasPages())<div class="app-card__footer loyalty-table-footer">{{ $batches->links() }}</div>@endif
    </div>
</div>

{{-- Cards log --}}
<div class="app-card">
    <div class="app-card__header">
        <div class="app-card__title"><i class="fa-solid fa-ticket"></i> سجل الأكواد</div>
        <span class="app-badge app-badge--primary">{{ $cards->total() }} كود</span>
    </div>
    <div class="loyalty-table-section">
            <table class="app-table loyalty-table">
                <thead><tr>
                    <th>الكود</th>
                    <th>الدفعة</th>
                    <th>النقاط</th>
                    <th>{{ __('dashboard.status_label') }}</th>
                    <th>العميل</th>
                    <th>استبدله</th>
                    <th>صلاحية النقاط</th>
                    <th>تاريخ الاستبدال</th>
                </tr></thead>
                <tbody>
                    @forelse($cards as $card)
                    <tr>
                        <td class="font-bold">{{ $card->code }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $card->batch?->title??'—' }}</td>
                        <td class="font-black">{{ number_format($card->points_amount) }}</td>
                        <td>
                            @if($card->status==='redeemed')
                                <span class="app-badge app-badge--success">مستبدل</span>
                            @elseif($card->status==='cancelled')
                                <span class="app-badge app-badge--danger">ملغي</span>
                            @else
                                <span class="app-badge app-badge--primary">جاهز</span>
                            @endif
                        </td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $card->redeemedCustomer?->name??'—' }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $card->redeemedBy?->name??'—' }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $card->points_expires_at?$card->points_expires_at->format('Y-m-d'):'—' }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $card->redeemed_at?$card->redeemed_at->format('Y-m-d H:i'):'—' }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="8">@include('layouts.partials.empty-table-state', ['message'=>'لا توجد أكواد لعرضها'])</td></tr>
                    @endforelse
                </tbody>
            </table>
        @if($cards->hasPages())<div class="app-card__footer loyalty-table-footer">{{ $cards->links() }}</div>@endif
    </div>
</div>
@endsection

@section('styles')
<style>
.fin-icon{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.loyalty-table-section{overflow-x:auto}
.loyalty-table{margin:0}
.loyalty-table thead th{
    background:var(--surface-50);
    color:var(--text-secondary);
    font-size:.71rem;
    font-weight:800;
    letter-spacing:.04em;
    border-bottom:1px solid var(--border);
}
.loyalty-table tbody tr{background:transparent}
.loyalty-table tbody tr:hover{background:var(--surface-50)}
.loyalty-table tbody td{
    border-bottom:1px solid var(--border-subtle);
    color:var(--text-primary);
    font-size:.84rem;
    font-weight:600;
}
.loyalty-table tbody tr:last-child td{border-bottom:none}
.loyalty-table .app-badge{box-shadow:none}
.loyalty-table-footer{background:transparent}
.dark .loyalty-table thead th{
    background:rgba(148,163,184,.08);
    color:#cbd5e1;
    border-bottom-color:rgba(148,163,184,.14);
}
.dark .loyalty-table tbody tr:hover{background:rgba(148,163,184,.06)}
.dark .loyalty-table tbody td{
    border-bottom-color:rgba(148,163,184,.10);
    color:#f1f5f9;
}
@media (max-width: 991.98px){.row.g-4 > .col-span-3{width:50%}}
@media (max-width: 767.98px){
    .row.g-4 > .col-span-3{width:100%}
    .loyalty-table thead th,
    .loyalty-table tbody td{white-space:nowrap}
}
</style>
@endsection