@extends(template() . 'layout.master2')


@section('content2')


<div class="space-y-10">

    <div class="flex items-center justify-between md:hidden px-2">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-blue-600/10 flex items-center justify-center text-blue-600">
                <i data-lucide="arrow-left-right" class="w-5 h-5"></i>
            </div>
            <h5 class="text-lg font-black text-slate-900 dark:text-white uppercase tracking-tighter italic">{{ __('Transfer History') }}</h5>
        </div>
        <a href="{{ route('user.dashboard') }}"
            class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-blue-600 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            {{ __('Back') }}
        </a>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
        @php
            $navs = [
                ['route' => 'user.withdraw.all', 'label' => 'Withdraw', 'icon' => 'banknote'],
                ['route' => 'user.deposit.log', 'label' => 'Deposits', 'icon' => 'plus-circle'],
                ['route' => 'user.money.log', 'label' => 'Transfers', 'icon' => 'repeat', 'active' => true],
                ['route' => 'user.exchange.log', 'label' => 'Exchange', 'icon' => 'refresh-ccw'],
                ['route' => 'user.order.log', 'label' => 'Orders', 'icon' => 'shopping-bag'],
            ];
        @endphp

        @foreach($navs as $nav)
            <a href="{{ route($nav['route']) }}" 
               class="flex flex-col items-center justify-center p-5 rounded-[2rem] border transition-all duration-300 group {{ isset($nav['active']) ? 'bg-blue-600 border-blue-600 shadow-xl shadow-blue-600/20' : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 hover:border-blue-500/50' }}">
                <div class="w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors {{ isset($nav['active']) ? 'bg-white/20 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 group-hover:text-blue-600' }}">
                    <i data-lucide="{{ $nav['icon'] }}" class="w-5 h-5"></i>
                </div>
                <span class="text-[10px] font-black uppercase tracking-widest {{ isset($nav['active']) ? 'text-white' : 'text-slate-600 dark:text-slate-400' }}">
                    {{ __($nav['label']) }}
                </span>
            </a>
        @endforeach
    </div>

    <div class="bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl border border-slate-200 dark:border-slate-800/50 overflow-hidden">
        
        <div class="p-6 md:p-10 border-b border-slate-100 dark:border-slate-800/60 bg-slate-50/50 dark:bg-slate-900/50 backdrop-blur-md">
            <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
                <div>
                    <h5 class="text-2xl font-black text-slate-900 dark:text-white uppercase tracking-tighter italic">{{ __('Money Transfer Log') }}</h5>
                    <p class="text-slate-500 dark:text-slate-400 text-[10px] font-bold uppercase tracking-[0.2em] mt-1">{{ __('Internal and peer-to-peer movements') }}</p>
                </div>

                <form action="" method="get" class="flex flex-wrap items-center gap-3">
                    <div class="relative w-full md:w-48">
                        <input type="text" name="trx" value="{{ request()->trx }}"
                            class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs font-bold text-slate-900 dark:text-white rounded-xl px-4 py-3 focus:border-blue-500 focus:ring-0 transition-all placeholder:text-slate-400"
                            placeholder="TRX ID">
                    </div>

                    <div class="relative w-full md:w-auto">
                        <input type="date" name="date" value="{{ request()->date }}"
                            class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs font-bold text-slate-900 dark:text-white rounded-xl px-4 py-3 focus:border-blue-500 focus:ring-0 transition-all">
                    </div>

                    <button type="submit"
                        class="w-full md:w-auto bg-slate-900 dark:bg-blue-600 hover:scale-105 text-white p-3 rounded-xl shadow-lg transition-all active:scale-95">
                        <i data-lucide="search" class="w-5 h-5 mx-auto"></i>
                    </button>
                </form>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50 dark:bg-slate-950/50 border-b border-slate-100 dark:border-slate-800/50">
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]">{{ __('Transaction') }}</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]">{{ __('Parties') }}</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]">{{ __('Amount') }}</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]">{{ __('Charge') }}</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]">{{ __('Date') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/40">
                    @forelse($transfers as $transaction)
                        <tr class="group hover:bg-slate-50/50 dark:hover:bg-slate-800/20 transition-colors">
                            <td class="px-8 py-6">
                                <div class="flex flex-col">
                                    <span class="text-xs font-black text-slate-900 dark:text-slate-200 font-mono tracking-tighter">#{{ $transaction->transaction_id }}</span>
                                    <span class="text-[9px] text-slate-400 dark:text-slate-500 uppercase font-bold mt-1 max-w-[150px] truncate">{{ $transaction->details }}</span>
                                </div>
                            </td>
                            
                            <td class="px-8 py-6">
                                <div class="flex items-center gap-3">
                                    <div class="flex flex-col">
                                        <span class="text-[8px] font-black text-blue-500 uppercase tracking-widest italic">Sender</span>
                                        <span class="text-[11px] font-bold text-slate-700 dark:text-slate-300 leading-tight">{{ $transaction->sender->full_name }}</span>
                                        <span class="text-[9px] text-slate-400 dark:text-slate-500 font-medium">{{ $transaction->sender->email }}</span>
                                    </div>
                                    
                                    <div class="h-8 w-px bg-slate-200 dark:bg-slate-800 mx-1"></div>
                                    
                                    <div class="flex flex-col">
                                        <span class="text-[8px] font-black text-emerald-500 uppercase tracking-widest italic">Receiver</span>
                                        <span class="text-[11px] font-bold text-slate-700 dark:text-slate-300 leading-tight">{{ $transaction->receiver->full_name }}</span>
                                        <span class="text-[9px] text-slate-400 dark:text-slate-500 font-medium">{{ $transaction->receiver->email }}</span>
                                    </div>
                                </div>
                            </td>

                            <td class="px-8 py-6">
                                <div class="flex flex-col">
                                    <span class="text-sm font-black text-slate-900 dark:text-white">
                                        {{ number_format($transaction->amount, 2) }}
                                    </span>
                                    <span class="text-[10px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-tighter">{{ $general->site_currency }}</span>
                                </div>
                            </td>

                            <td class="px-8 py-6">
                                <span class="inline-flex items-center px-2 py-1 rounded-lg text-[10px] font-bold bg-rose-500/10 text-rose-600 dark:text-rose-400 border border-rose-500/20">
                                    -{{ number_format($transaction->charge, 2) }} {{ $general->site_currency }}
                                </span>
                            </td>

                            <td class="px-8 py-6 text-right lg:text-left">
                                <span class="text-xs font-bold text-slate-500 dark:text-slate-400 italic">
                                    {{ $transaction->created_at->format('M d, Y') }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-8 py-24 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 bg-slate-50 dark:bg-slate-800/50 rounded-2xl flex items-center justify-center text-slate-300 dark:text-slate-600 mb-4 border border-slate-100 dark:border-slate-800">
                                        <i data-lucide="ghost" class="w-8 h-8"></i>
                                    </div>
                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] italic">{{ __('No transfer records found') }}</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($transfers->hasPages())
            <div class="p-8 border-t border-slate-100 dark:border-slate-800/60 bg-slate-50/30 dark:bg-slate-900/30">
                {{ $transfers->links() }}
            </div>
        @endif
    </div>
</div>
@endsection
