@extends('layouts.app')
@section('title', 'Harcama Cuzdani')
@section('page-title', 'Harcama Cuzdani')

@section('content')
@if($wallets->count() > 0)
    @foreach($wallets as $wallet)
        @php $wCurrency = $wallet->currency; @endphp
        {{-- Wallet Balance Card --}}
        <div class="bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl shadow-lg p-6 mb-6 text-white">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <p class="text-sm text-violet-200 font-medium">Mevcut Bakiye <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-md text-xs font-bold">{{ $wCurrency->code ?? '' }}</span></p>
                    <p class="text-3xl font-bold mt-1">@money($wallet->balance, $wCurrency)</p>
                </div>
                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a2 2 0 01-2 2h-2a2 2 0 01-2-2v0a2 2 0 012-2h2a2 2 0 012 2zM3 7v10a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2z"/></svg>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4 pt-4 border-t border-white/20">
                <div>
                    <p class="text-xs text-violet-200">Toplam Yuklenen</p>
                    <p class="text-lg font-bold mt-0.5">@money($wallet->total_loaded, $wCurrency)</p>
                </div>
                <div>
                    <p class="text-xs text-violet-200">Toplam Harcanan</p>
                    <p class="text-lg font-bold mt-0.5">@money($wallet->total_spent, $wCurrency)</p>
                </div>
            </div>
        </div>

        {{-- Transaction History --}}
        @if($wallet->transactions->count() > 0)
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 mb-8">
                <div class="flex items-center justify-between p-5 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2">
                        <svg class="w-5 h-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Islem Gecmisi
                        <span class="text-xs font-normal text-gray-400">({{ $wCurrency->code ?? '' }})</span>
                    </h2>
                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ $wallet->transactions->count() }} islem</span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-gray-50/50 dark:bg-gray-700/50">
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Tarih</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Tip</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Tutar</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Isletme</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Bakiye</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Aciklama</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50 dark:divide-gray-700">
                            @foreach($wallet->transactions as $tx)
                                <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-700/50 transition-colors">
                                    <td class="px-5 py-3.5"><span class="text-sm text-gray-700 dark:text-gray-200">{{ $tx->transaction_date->format('d.m.Y H:i') }}</span></td>
                                    <td class="px-5 py-3.5">
                                        @php
                                            $txColors = [1 => 'bg-emerald-50 text-emerald-700', 2 => 'bg-red-50 text-red-700', 3 => 'bg-blue-50 text-blue-700'];
                                            $txColor = $txColors[$tx->transaction_type] ?? 'bg-gray-50 text-gray-600';
                                        @endphp
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium {{ $txColor }}">{{ $tx->transaction_type_text }}</span>
                                    </td>
                                    <td class="px-5 py-3.5">
                                        <span class="text-sm font-bold {{ $tx->is_credit ? 'text-emerald-600' : 'text-red-500' }}">
                                            {{ $tx->is_credit ? '+' : '-' }}@money($tx->amount, $wCurrency)
                                        </span>
                                    </td>
                                    <td class="px-5 py-3.5"><span class="text-sm text-gray-500 dark:text-gray-400">{{ $tx->business_name ?? '-' }}</span></td>
                                    <td class="px-5 py-3.5"><span class="text-sm text-gray-600 dark:text-gray-300">@money($tx->balance_after, $wCurrency)</span></td>
                                    <td class="px-5 py-3.5"><span class="text-sm text-gray-500 dark:text-gray-400">{{ $tx->description ? Str::limit($tx->description, 30) : '-' }}</span></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @else
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-8 text-center mb-8">
                <p class="text-sm text-gray-400 dark:text-gray-500">{{ $wCurrency->code ?? '' }} cuzdaninda henuz islem yapilmamis.</p>
            </div>
        @endif
    @endforeach
@else
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-12 text-center">
        <div class="w-16 h-16 bg-violet-50 dark:bg-violet-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-violet-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a2 2 0 01-2 2h-2a2 2 0 01-2-2v0a2 2 0 012-2h2a2 2 0 012 2zM3 7v10a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2z"/></svg>
        </div>
        <p class="text-gray-400 dark:text-gray-500 text-sm">Harcama cuzdani henuz tanimlanmamis.</p>
    </div>
@endif
@endsection