@extends('layouts.customer')

@section('title', 'My Reward Points')

@section('content')
<main class="p-6 space-y-6">

    {{-- Summary --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-gradient-to-r from-indigo-500 to-indigo-700 text-white p-6 rounded-xl shadow">
            <p class="text-sm opacity-90">Total Earned Points</p>
            <h2 class="text-3xl font-bold mt-1">
                {{ number_format($totalEarned + $redeemedPoints) }}
            </h2>
        </div>

        <div class="bg-white border rounded-xl p-6 shadow">
            <p class="text-sm text-gray-500">Redeemed Points</p>
            <h3 class="text-2xl font-bold text-red-600 mt-1">
                {{ number_format($redeemedPoints) }}
            </h3>
        </div>

        <div class="bg-white border rounded-xl p-6 shadow">
            <p class="text-sm text-gray-500">Available Points</p>
            <h3 class="text-2xl font-bold text-green-600 mt-1">
                {{ number_format($availablePoints) }}
            </h3>
        </div>

        <div class="bg-white border rounded-xl p-6 shadow">
            <p class="text-sm text-gray-500">Max Redeemable</p>
            <h3 class="text-2xl font-bold text-blue-600 mt-1">
                {{ number_format($redeemable) }}
            </h3>
        </div>
    </div>

    {{-- Redeem Section --}}
    <div class="bg-green-50 border border-green-200 rounded-xl p-6">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
            <div>
                <h3 class="text-lg font-semibold text-green-900">
                    Redeem Reward Points
                </h3>

                @if($redeemable >= 1000)
                    <p class="text-sm text-green-700 mt-1">
                        You can redeem <strong>{{ number_format($redeemable) }}</strong> points into your rewards wallet.
                    </p>
                @else
                    <p class="text-sm text-green-700 mt-1">
                        You need at least <strong>1,000 points</strong> to redeem.
                        You currently have <strong>{{ number_format($availablePoints) }}</strong> unredeemed points.
                    </p>
                @endif

                <p class="text-xs text-green-600 mt-1">
                    1,000 points = 1kg free shipping (base shipping only)
                </p>
            </div>

            <form method="POST" action="{{ route('customer.rewards.redeem') }}">
                @csrf
                <button
                    type="submit"
                    @disabled($redeemable < 1000)
                    class="px-6 py-3 rounded-lg font-semibold
                           {{ $redeemable >= 1000
                               ? 'bg-green-600 hover:bg-green-700 text-white'
                               : 'bg-gray-300 text-gray-500 cursor-not-allowed' }}">
                    Redeem Points
                </button>
            </form>
        </div>
    </div>

    {{-- Points History --}}
    <div class="bg-white rounded-xl shadow border">
        <div class="p-4 border-b">
            <h3 class="text-lg font-semibold">Points History</h3>
        </div>

        <table class="min-w-full text-sm">
            <thead class="bg-gray-100 text-gray-600">
                <tr>
                    <th class="px-4 py-3 text-left">Date</th>
                    <th class="px-4 py-3 text-left">Description</th>
                    <th class="px-4 py-3 text-right">Points</th>
                </tr>
            </thead>
            <tbody>
                @forelse($shipmentTransactions as $tx)
                <tr class="border-t">
                    <td class="px-4 py-3">
                        {{ \Carbon\Carbon::parse($tx->created_at)->format('d M Y') }}
                    </td>
                    <td class="px-4 py-3">
                        {{ $tx->description }}
                    </td>
                    <td class="px-4 py-3 text-right font-bold
                        {{ ($tx->points_redeemed ?? 0) >= ($tx->points ?? 0) ? 'text-gray-400 line-through' : 'text-green-600' }}">
                        +{{ number_format($tx->points) }}
                        @if(($tx->points_redeemed ?? 0) > 0)
                            <span class="text-xs text-gray-500">
                                ({{ number_format($tx->points_redeemed) }} redeemed)
                            </span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="px-4 py-6 text-center text-gray-500">
                        No points history available.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <div class="p-4">
            {{ $shipmentTransactions->links() }}
        </div>
    </div>

</main>
@endsection