@extends('layouts.epelcon')
@section('title', 'Referrals & Rewards')

@section('content')
<div x-data="{ adjust: false }">
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Referrals & rewards</h1>
            <p class="text-sm text-slate-500">Loyalty engine — referrals, points earned and redemptions.</p>
        </div>
        <button @click="adjust = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">± Adjust points</button>
    </div>

    <div class="mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Referrals</p><p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $summary['total'] }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Rewarded</p><p class="mt-1 text-2xl font-extrabold text-emerald-600">{{ $summary['rewarded'] }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Points issued</p><p class="mt-1 text-2xl font-extrabold text-violet-600">{{ number_format($summary['points_issued']) }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Points redeemed</p><p class="mt-1 text-2xl font-extrabold text-rose-600">{{ number_format($summary['points_redeemed']) }}</p></div>
    </div>

    <div class="grid gap-5 lg:grid-cols-2">
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">Referral log</h2>
            <div class="divide-y divide-slate-100">
                @forelse ($referrals as $referral)
                    <div class="flex items-center justify-between py-2.5 text-sm">
                        <div>
                            <p class="font-semibold text-slate-800">{{ $referral->referrer->name ?? '—' }} → {{ $referral->referred->name ?? '—' }}</p>
                            <p class="text-xs text-slate-400">Code {{ $referral->code_used }} · {{ $referral->created_at->format('j M Y') }}</p>
                        </div>
                        <span class="font-bold text-violet-600">+{{ $referral->reward_points }} pts</span>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-400">No referrals recorded yet.</p>
                @endforelse
            </div>
            <div class="mt-3">{{ $referrals->links() }}</div>
        </div>

        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">Reward transactions</h2>
            <div class="divide-y divide-slate-100">
                @forelse ($rewards as $tx)
                    <div class="flex items-center justify-between py-2.5 text-sm">
                        <div>
                            <p class="font-semibold text-slate-800">{{ $tx->customer->name ?? '—' }}</p>
                            <p class="text-xs text-slate-400">{{ $tx->description }} · {{ ucfirst($tx->type) }} · {{ $tx->created_at->format('j M Y') }}</p>
                        </div>
                        <span class="font-bold {{ $tx->points > 0 ? 'text-emerald-600' : 'text-rose-500' }}">{{ $tx->points > 0 ? '+' : '' }}{{ $tx->points }}</span>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-400">No reward activity yet.</p>
                @endforelse
            </div>
            <div class="mt-3">{{ $rewards->links() }}</div>
        </div>
    </div>

    {{-- Adjust modal --}}
    <div x-cloak x-show="adjust" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="adjust = false"></div>
        <div x-show="adjust" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Adjust reward points</h2>
            <form method="POST" action="{{ route('epelcon.rewards.adjust') }}" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Customer</span>
                    <select name="customer_id" required class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach ($customers as $customer)<option value="{{ $customer->id }}">{{ $customer->name }} ({{ $customer->reward_points }} pts)</option>@endforeach
                    </select></label>
                <div class="grid grid-cols-2 gap-4">
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Action</span>
                        <select name="type" class="w-full rounded-xl border-slate-200 text-sm">
                            <option value="earn">Add points</option><option value="redeem">Redeem points</option><option value="adjustment">Adjustment</option>
                        </select></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Points</span>
                        <input type="number" name="points" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                </div>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Reason</span>
                    <input name="description" required placeholder="e.g. Redeemed for dinner voucher" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="adjust = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Apply</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
