@extends('layouts.customer')

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Transaction History</h1>
    </div>

    {{-- Filter Bar --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
        <form method="GET" action="{{ route('customer.transactions') }}" class="flex flex-wrap gap-3 items-end">
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Type</label>
                <select name="type" class="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
                    <option value="">All Types</option>
                    <option value="transfer" {{ request('type') === 'transfer' ? 'selected' : '' }}>Transfer</option>
                    <option value="deposit" {{ request('type') === 'deposit' ? 'selected' : '' }}>Deposit</option>
                    <option value="withdrawal" {{ request('type') === 'withdrawal' ? 'selected' : '' }}>Withdrawal</option>
                    <option value="bill_payment" {{ request('type') === 'bill_payment' ? 'selected' : '' }}>Bill Payment</option>
                    <option value="airtime" {{ request('type') === 'airtime' ? 'selected' : '' }}>Airtime</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                <select name="status" class="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
                    <option value="">All Status</option>
                    <option value="successful" {{ request('status') === 'successful' ? 'selected' : '' }}>Successful</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Failed</option>
                </select>
            </div>
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-medium text-gray-500 mb-1">Search</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Reference or description" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
            </div>
            <div class="flex space-x-2">
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-[#0D6B58] rounded-lg hover:bg-[#0A5A49] transition">Filter</button>
                <a href="{{ route('customer.transactions') }}" class="px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition">Clear</a>
            </div>
        </form>
    </div>

    {{-- Desktop Table --}}
    <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">
                    <th class="px-6 py-3">Date</th>
                    <th class="px-6 py-3">Reference</th>
                    <th class="px-6 py-3">Type</th>
                    <th class="px-6 py-3">Description</th>
                    <th class="px-6 py-3 text-right">Amount</th>
                    <th class="px-6 py-3">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($transactions as $transaction)
                <tr class="hover:bg-gray-50 transition cursor-pointer" onclick="window.location='{{ route('customer.transactions.show', $transaction->id) }}'">
                    <td class="px-6 py-4 text-sm text-gray-500">{{ $transaction->created_at->format('M d, Y') }}</td>
                    <td class="px-6 py-4 text-sm font-mono text-gray-600">{{ $transaction->reference }}</td>
                    <td class="px-6 py-4">
                        <div class="flex items-center space-x-2">
                            <div class="w-6 h-6 rounded-full flex items-center justify-center
                                @if(in_array($transaction->type, ['transfer', 'debit'])) bg-rose-100
                                @else bg-emerald-100 @endif">
                                @if(in_array($transaction->type, ['transfer', 'debit']))
                                <svg class="w-3 h-3 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6"/></svg>
                                @else
                                <svg class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"/></svg>
                                @endif
                            </div>
                            <span class="text-sm text-gray-700 capitalize">{{ str_replace('_', ' ', $transaction->type) }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900 max-w-xs truncate">{{ $transaction->description }}</td>
                    <td class="px-6 py-4 text-sm font-semibold text-right
                        @if($transaction->type === 'credit' || $transaction->type === 'deposit') text-emerald-600
                        @else text-rose-600 @endif">
                        @if($transaction->type === 'credit' || $transaction->type === 'deposit') +@else-@endif${{ number_format($transaction->amount, 2) }}
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            @if($transaction->status === 'successful') bg-emerald-100 text-emerald-700
                            @elseif($transaction->status === 'pending') bg-amber-100 text-amber-700
                            @else bg-rose-100 text-rose-700 @endif">
                            {{ ucfirst($transaction->status) }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center">
                        <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                        <p class="text-sm text-gray-500">No transactions found</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Mobile Cards --}}
    <div class="md:hidden space-y-3">
        @forelse($transactions as $transaction)
        <a href="{{ route('customer.transactions.show', $transaction->id) }}" class="block bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center
                        @if($transaction->type === 'credit' || $transaction->type === 'deposit') bg-emerald-100
                        @else bg-rose-100 @endif">
                        @if($transaction->type === 'credit' || $transaction->type === 'deposit')
                        <svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"/></svg>
                        @else
                        <svg class="w-4 h-4 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6"/></svg>
                        @endif
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900">{{ $transaction->description }}</p>
                        <p class="text-xs text-gray-400">{{ $transaction->created_at->format('M d, Y') }}</p>
                    </div>
                </div>
                <p class="text-sm font-semibold
                    @if($transaction->type === 'credit' || $transaction->type === 'deposit') text-emerald-600
                    @else text-rose-600 @endif">
                    @if($transaction->type === 'credit' || $transaction->type === 'deposit') +@else-@endif${{ number_format($transaction->amount, 2) }}
                </p>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-xs font-mono text-gray-400">{{ $transaction->reference }}</span>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                    @if($transaction->status === 'successful') bg-emerald-100 text-emerald-700
                    @elseif($transaction->status === 'pending') bg-amber-100 text-amber-700
                    @else bg-rose-100 text-rose-700 @endif">
                    {{ ucfirst($transaction->status) }}
                </span>
            </div>
        </a>
        @empty
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
            <p class="text-sm text-gray-500">No transactions found</p>
        </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if($transactions->hasPages())
    <div class="mt-6">
        {{ $transactions->withQueryString()->links() }}
    </div>
    @endif

</div>
@endsection