@extends('layouts.finance.finance')

@section('content')
    <div x-data="{ tab: '{{ $activeTab }}' }" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {{-- Page Header --}}
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-semibold text-gray-800">Payments</h1>
            <div class="space-x-2">
                <!-- <button
                    class="bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded shadow text-sm transition-colors">
                    + Record Payment
                </button> -->
            </div>
        </div>

        {{-- Financial Overview Stats --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-blue-500">
                <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider">Total In</h3>
                <p class="text-2xl font-bold text-gray-900 mt-2">₹{{ number_format($stats['total_received'], 2) }}</p>
            </div>
            <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-blue-400">
                <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider">Received This Month</h3>
                <p class="text-2xl font-bold text-blue-600 mt-2">₹{{ number_format($stats['this_month_received'], 2) }}</p>
            </div>
            <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-amber-500">
                <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider">Total Out</h3>
                <p class="text-2xl font-bold text-gray-900 mt-2">₹{{ number_format($stats['total_paid'], 2) }}</p>
            </div>
            <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-amber-400">
                <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider">Paid This Month</h3>
                <p class="text-2xl font-bold text-amber-600 mt-2">₹{{ number_format($stats['this_month_paid'], 2) }}</p>
            </div>
        </div>

        {{-- Tabs Navigation --}}
        <div class="border-b border-gray-200 mb-6">
            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                <button @click="tab = 'client'"
                    :class="tab === 'client' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    Client Payments (Money In)
                </button>
                <button @click="tab = 'vendor'"
                    :class="tab === 'vendor' ? 'border-amber-500 text-amber-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    Vendor Payments (Money Out)
                </button>
            </nav>
        </div>

        {{-- TAB 1: CLIENT PAYMENTS (Money In) --}}
        <div x-show="tab === 'client'" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date Received</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project & Stage</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount Received</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($clientPayments as $payment)
                            <tr class="hover:bg-blue-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ $payment->received_date ? \Carbon\Carbon::parse($payment->received_date)->format('M d, Y') : 'N/A' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <div class="font-medium text-blue-600">{{ $payment->project->title ?? 'Unknown Project' }}
                                    </div>
                                    <div class="text-xs text-gray-500">{{ $payment->stage_name }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">
                                    ₹{{ number_format($payment->received_amount, 2) }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <span class="px-2.5 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                        Received
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-8 text-center text-sm text-gray-500">No client payments recorded
                                    yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- TAB 2: VENDOR PAYMENTS (Money Out) --}}
        <div x-show="tab === 'vendor'" style="display: none;" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Payment Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Vendor & PO Ref</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount Paid</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Method / Txn ID</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($vendorPayments as $payment)
                            <tr class="hover:bg-amber-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ $payment->payment_date ? \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') : 'N/A' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <div class="font-medium text-amber-600">
                                        {{ $payment->vendor->company_name ?? 'Unknown Vendor' }}</div>
                                    <div class="text-xs text-gray-500">PO: {{ $payment->order->po_number ?? 'N/A' }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-red-600">
                                    ₹{{ number_format($payment->paid_amount, 2) }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                    <div>{{ strtoupper($payment->payment_method) }}</div>
                                    <div class="text-xs text-gray-400">{{ $payment->transaction_id ?? 'No Txn ID' }}</div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-8 text-center text-sm text-gray-500">No vendor payments recorded
                                    yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection