@extends('driver.layout')

@section('title','Payments')

@section('content')

<div class="space-y-8 max-w-7xl mx-auto">

    {{-- HEADER --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
                Payments
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Your earnings and payout history
            </p>
        </div>

        <span class="px-4 py-2 rounded-xl bg-primary/10 text-primary text-sm font-semibold">
            {{ now()->format('d M Y') }}
        </span>
    </div>

    {{-- STATS --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

        {{-- TOTAL --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm
                    border border-gray-200 dark:border-slate-700
                    hover:shadow-lg transition">
            <p class="text-sm text-gray-500">Total Earnings</p>
            <h2 class="text-3xl font-bold text-green-600">
                Rs {{ number_format($stats['total_earnings'], 2) }}
            </h2>
        </div>

        {{-- TODAY --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm
                    border border-gray-200 dark:border-slate-700
                    hover:shadow-lg transition">
            <p class="text-sm text-gray-500">Today</p>
            <h2 class="text-3xl font-bold text-blue-600">
                Rs {{ number_format($stats['today_earnings'], 2) }}
            </h2>
        </div>

        {{-- PENDING --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm
                    border border-gray-200 dark:border-slate-700
                    hover:shadow-lg transition">
            <p class="text-sm text-gray-500">Pending Payout</p>
            <h2 class="text-3xl font-bold text-yellow-600">
                Rs {{ number_format($stats['pending_payout'], 2) }}
            </h2>
        </div>

    </div>

    {{-- PAYMENTS TABLE --}}
    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm
                border border-gray-200 dark:border-slate-700 overflow-hidden">

        <div class="p-6 border-b dark:border-slate-700">
            <h3 class="font-semibold text-lg text-gray-800 dark:text-white">
                Recent Earnings
            </h3>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 dark:bg-slate-800 text-gray-600 dark:text-gray-300">
                    <tr>
                        <th class="px-6 py-3 text-left">Order</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th class="text-right px-6">Amount</th>
                    </tr>
                </thead>

                <tbody class="divide-y dark:divide-slate-700">

                @forelse($orders as $order)
                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-800 transition">
                        <td class="px-6 py-4 font-medium">
                            #{{ $order->id }}
                        </td>

                        <td class="text-gray-500 text-xs">
                            {{ $order->delivered_at
                                ? \Carbon\Carbon::parse($order->delivered_at)->format('d M Y')
                                : '—' }}
                        </td>

                        <td>
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                Paid
                            </span>
                        </td>

                        <td class="text-right px-6 font-semibold text-green-600">
                            Rs {{ number_format($order->driver_fee, 2) }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center py-8 text-gray-500">
                            No payment records found
                        </td>
                    </tr>
                @endforelse

                </tbody>
            </table>
        </div>

    </div>

</div>

@endsection