@extends('layouts.customer')

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

    <a href="{{ route('customer.accounts') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-[#0D6B58] mb-6 transition">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Accounts
    </a>

    {{-- Account Info Card --}}
    <div class="bg-gradient-to-br from-[#0D6B58] to-[#0A5A49] rounded-2xl shadow-lg p-8 text-white mb-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-emerald-200 text-sm font-medium">{{ ucfirst($account->type) }} Account</p>
                <div class="flex items-center space-x-2 mt-2">
                    <p class="text-2xl font-mono font-semibold tracking-wider">{{ $account->account_number }}</p>
                    <button onclick="navigator.clipboard.writeText('{{ $account->account_number }}')" class="p-1 rounded hover:bg-white/20 transition" title="Copy account number">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="mt-4 sm:mt-0 sm:text-right">
                <p class="text-emerald-200 text-sm">Available Balance</p>
                <p class="text-4xl font-bold mt-1">${{ number_format($account->balance, 2) }}</p>
            </div>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 mt-8 pt-6 border-t border-white/20">
            <div>
                <p class="text-emerald-200 text-xs">Ledger Balance</p>
                <p class="text-sm font-semibold mt-1">${{ number_format($account->ledger_balance ?? $account->balance, 2) }}</p>
            </div>
            <div>
                <p class="text-emerald-200 text-xs">Status</p>
                <p class="text-sm font-semibold mt-1 capitalize">{{ $account->status }}</p>
            </div>
            <div>
                <p class="text-emerald-200 text-xs">Date Created</p>
                <p class="text-sm font-semibold mt-1">{{ $account->created_at->format('M d, Y') }}</p>
            </div>
            <div>
                <p class="text-emerald-200 text-xs">Currency</p>
                <p class="text-sm font-semibold mt-1">USD ($)</p>
            </div>
        </div>
    </div>

    {{-- Action Buttons --}}
    <div class="flex flex-wrap gap-3 mb-8">
        <a href="{{ route('customer.transfer', ['account_id' => $account->id]) }}" class="inline-flex items-center px-5 py-2.5 bg-[#0D6B58] text-white text-sm font-medium rounded-lg hover:bg-[#0A5A49] transition">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
            </svg>
            Transfer
        </a>
        <a href="{{ route('customer.deposits', ['account_id' => $account->id]) }}" class="inline-flex items-center px-5 py-2.5 bg-white text-[#0D6B58] text-sm font-medium rounded-lg border border-[#0D6B58]/20 hover:bg-[#0D6B58]/5 transition">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/>
            </svg>
            Deposit
        </a>
        <a href="{{ route('customer.withdrawals', ['account_id' => $account->id]) }}" class="inline-flex items-center px-5 py-2.5 bg-white text-gray-700 text-sm font-medium rounded-lg border border-gray-200 hover:bg-gray-50 transition">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V7m0 10v1m-4-5h8"/>
            </svg>
            Withdraw
        </a>
    </div>

    {{-- Transaction History --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-semibold text-gray-900">Transaction History</h2>
        </div>

        {{-- Filters --}}
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
            <form method="GET" action="{{ route('customer.accounts.show', $account->id) }}" class="flex flex-wrap gap-3">
                <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]">
                <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]">
                <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="credit" {{ request('type') === 'credit' ? 'selected' : '' }}>Credit</option>
                    <option value="debit" {{ request('type') === 'debit' ? 'selected' : '' }}>Debit</option>
                </select>
                <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>
                <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.accounts.show', $account->id) }}" 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>
            </form>
        </div>

        {{-- Desktop Table --}}
        <div class="hidden md:block overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <th class="px-6 py-3">Date</th>
                        <th class="px-6 py-3">Reference</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 text-right">Balance</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">
                        <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 text-sm text-gray-900">{{ $transaction->description }}</td>
                        <td class="px-6 py-4 text-sm font-semibold text-right
                            @if($transaction->type === 'credit') text-emerald-600
                            @else text-rose-600 @endif">
                            @if($transaction->type === 'credit') +@else-@endif${{ number_format($transaction->amount, 2) }}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 text-right">${{ number_format($transaction->balance_after ?? 0, 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 divide-y divide-gray-50">
            @forelse($transactions as $transaction)
            <a href="{{ route('customer.transactions.show', $transaction->id) }}" class="block px-6 py-4 hover:bg-gray-50 transition">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-900">{{ $transaction->description }}</p>
                        <p class="text-xs text-gray-400 mt-1">{{ $transaction->created_at->format('M d, Y') }} &middot; {{ $transaction->reference }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm font-semibold
                            @if($transaction->type === 'credit') text-emerald-600
                            @else text-rose-600 @endif">
                            @if($transaction->type === 'credit') +@else-@endif${{ number_format($transaction->amount, 2) }}
                        </p>
                        <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>
                </div>
            </a>
            @empty
            <div class="px-6 py-12 text-center">
                <p class="text-sm text-gray-500">No transactions found</p>
            </div>
            @endforelse
        </div>

        {{-- Pagination --}}
        @if($transactions->hasPages())
        <div class="px-6 py-4 border-t border-gray-100">
            {{ $transactions->withQueryString()->links() }}
        </div>
        @endif
    </div>

</div>
@endsection