@extends('layouts.app')

@section('content')
<!-- <div class="py-12"> -->
    <div class="container py-12" x-data="{ showMessage: {{ session('success') ? 'true' : 'false' }} }">
       <template x-if="showMessage">
        <div class="bg-green-500 text-white p-4 rounded-md mb-4">
            <p x-text="'{{ session('success') }}'"></p>
        </div>
    </template>
    <template x-if="{{ session('error') }}">
    <div class="bg-red-500 text-white p-4 rounded-md mb-4">
        <p>{{ session('error') }}</p>
    </div>
</template>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Wallet Overview with Alpine.js -->
        <div x-data="{ balance: {{ $walletBalance }} }" class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-700 mb-4">Wallet Overview</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
                <!-- Wallet Balance Card -->
                <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 rounded-lg shadow-md flex flex-col items-center justify-center">
                    <h4 class="text-lg font-semibold">Current Balance</h4>
                    <p class="text-4xl font-bold mt-2" x-text="'Tsh ' + balance.toLocaleString()"></p>
                </div>

   <div x-data="{ amount: 0, description: '' }">
    <!-- Quick Actions -->
    <div class="flex flex-col gap-4">
        <div class="flex gap-4">
            <!-- Amount Input Field -->
            <input type="number" x-model="amount" placeholder="Enter amount" class="border p-3 rounded-md w-full">
        </div>
        <div class="flex gap-4">
            <!-- Description Input Field -->
            <input type="text" x-model="description" placeholder="Enter description" class="border p-3 rounded-md w-full">
        </div>

        <div class="flex gap-4">
            <!-- Deposit Form -->
            <form x-ref="depositForm" action="{{ route('wallet.deposit') }}" method="POST" class="w-full">
                @csrf
                <input type="hidden" name="amount" :value="amount" />
                <input type="hidden" name="description" :value="description" />

                <button type="button" @click="$refs.depositForm.submit()" class="bg-green-500 text-white px-6 py-3 rounded-md hover:bg-green-600 w-full">
                    <i class="fas fa-plus-circle"></i> Deposit
                </button>
            </form>

            <!-- Withdraw Form -->
            <form x-ref="withdrawForm" action="{{ route('wallet.withdraw') }}" method="POST" class="w-full">
                @csrf
                <input type="hidden" name="amount" :value="amount" />
                <input type="hidden" name="description" :value="description" />

                <button type="button" @click="$refs.withdrawForm.submit()" class="bg-red-500 text-white px-6 py-3 rounded-md hover:bg-red-600 w-full">
                    <i class="fas fa-minus-circle"></i> Withdraw
                </button>
            </form>
        </div>
    </div>
</div>


     </div>
</div>

<!-- Recent Transactions -->
<div class="bg-white p-6 rounded-lg shadow-md mt-8">
    <h3 class="text-xl font-semibold text-gray-700 mb-4">Recent Transactions</h3>
    <table class="w-full border-collapse border border-gray-300">
        <thead class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md rounded-t-lg">
            <tr>
                <th class="p-3 border">Date</th>
                <th class="p-3 border">Type</th>
                <th class="p-3 border">Amount</th>
                <th class="p-3 border">Status</th>
                <th class="p-3 border">Description</th>
            </tr>
        </thead>
        <tbody>
            @foreach($transactions as $transaction)
                <tr class="text-center">
                    <td class="p-3 border">{{ $transaction->created_at->format('d M Y') }}</td>
                    <td class="p-3 border">
                        <span class="px-3 py-1 rounded-full text-white 
                            {{ $transaction->type === 'deposit' ? 'bg-green-500' : ($transaction->type === 'loan' ? 'bg-blue-500' : 'bg-red-500') }}">
                            {{ ucfirst($transaction->type) }}
                        </span>
                    </td>
                    <td class="p-3 border">Tsh {{ number_format($transaction->amount, 2) }}</td>
                    <td class="p-3 border">
                        <span class="px-3 py-1 rounded-full text-white 
                            {{ $transaction->status === 'successful' ? 'bg-green-500' : 'bg-gray-500' }}">
                            {{ ucfirst($transaction->status) }}
                        </span>
                    </td>
                     <td class="p-3 border">
                     {{ $transaction->type === 'loan' ? ($transaction->description ?? 'Approved Loan') : $transaction->description }}
                   </td>

                </tr>
            @endforeach
        </tbody>
    </table>
    <!-- Pagination Links -->
    <div class="mt-4">
        {{ $transactions->links() }} 
    </div>
</div>

    </div>
</div>
@endsection