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



@section('content2')
<div class="min-h-screen bg-[#0b0e14] text-gray-100 px-4 py-8 md:px-10">
    
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-2xl font-bold text-white">{{ __('Withdraw History') }}</h1>
            <p class="text-gray-400 text-sm mt-1">Manage and track your funding logs</p>
        </div>
        <a href="{{ route('user.dashboard') }}" class="flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-orange-500 transition-colors">
            <i class="bi bi-arrow-left"></i> {{ __('Back') }}
        </a>
    </div>

    <div class="mb-10">
        <h4 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4">{{ __('Transaction History') }}</h4>
        <div class="flex flex-nowrap overflow-x-auto gap-3 pb-4 no-scrollbar">
            
            <a href="{{ route('user.withdraw.all') }}" class="flex items-center gap-3 px-6 py-3 rounded-2xl border transition-all whitespace-nowrap {{ Request::routeIs('user.withdraw*') ? 'bg-orange-500 border-orange-500 text-white shadow-lg shadow-orange-500/20' : 'bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-600' }}">
                <i class="bi bi-bank2 text-lg"></i>
                <span class="text-sm font-semibold">Withdraws</span>
            </a>

            <a href="{{ route('user.deposit.log') }}" class="flex items-center gap-3 px-6 py-3 rounded-2xl border bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-600 transition-all whitespace-nowrap">
                <i class="bi bi-wallet2 text-lg"></i>
                <span class="text-sm font-semibold">Deposits</span>
            </a>

            <!--<a href="{{ route('user.money.log') }}" class="flex items-center gap-3 px-6 py-3 rounded-2xl border bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-600 transition-all whitespace-nowrap">-->
            <!--    <i class="bi bi-arrow-left-right text-lg"></i>-->
            <!--    <span class="text-sm font-semibold">Transfers</span>-->
            <!--</a>-->

            <!--<a href="{{ route('user.exchange.log') }}" class="flex items-center gap-3 px-6 py-3 rounded-2xl border bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-600 transition-all whitespace-nowrap">-->
            <!--    <i class="bi bi-currency-exchange text-lg"></i>-->
            <!--    <span class="text-sm font-semibold">Exchange</span>-->
            <!--</a>-->

            <!--<a href="{{ route('user.order.log') }}" class="flex items-center gap-3 px-6 py-3 rounded-2xl border bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-600 transition-all whitespace-nowrap">-->
            <!--    <i class="bi bi-cart-check text-lg"></i>-->
            <!--    <span class="text-sm font-semibold">Orders</span>-->
            <!--</a>-->
        </div>
    </div>

    <div class="bg-gray-900/40 border border-gray-800 rounded-[2.5rem] overflow-hidden backdrop-blur-md">
        
        <div class="p-6 border-b border-gray-800 space-y-6">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div class="flex items-center gap-2 p-1 bg-black/40 rounded-xl w-fit border border-gray-800/50">
                    <a href="{{ route('user.withdraw.all') }}" class="px-4 py-2 rounded-lg text-[10px] font-black tracking-widest transition-all {{ Request::routeIs('user.withdraw.all') ? 'bg-gray-800 text-white' : 'text-gray-500 hover:text-gray-300' }}">ALL</a>
                    <a href="{{ route('user.withdraw.pending') }}" class="px-4 py-2 rounded-lg text-[10px] font-black tracking-widest transition-all {{ Request::routeIs('user.withdraw.pending') ? 'bg-orange-500 text-white' : 'text-gray-500 hover:text-gray-300' }}">PENDING</a>
                    <a href="{{ route('user.withdraw.complete') }}" class="px-4 py-2 rounded-lg text-[10px] font-black tracking-widest transition-all {{ Request::routeIs('user.withdraw.complete') ? 'bg-green-600 text-white' : 'text-gray-500 hover:text-gray-300' }}">COMPLETE</a>
                </div>

                <form action="" method="get" class="flex flex-wrap items-center gap-3">
                    <div class="relative w-full md:w-48">
                        <i class="bi bi-hash absolute left-4 top-1/2 -translate-y-1/2 text-gray-500"></i>
                        <input type="text" name="trx" class="w-full bg-gray-800 border-none rounded-xl pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-orange-500 outline-none" placeholder="Trx ID">
                    </div>
                    <div class="relative w-full md:w-48">
                        <i class="bi bi-calendar3 absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 text-xs"></i>
                        <input type="date" name="date" class="w-full bg-gray-800 border-none rounded-xl pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-orange-500 outline-none">
                    </div>
                    <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-xl text-sm font-bold transition-all w-full md:w-auto flex items-center justify-center gap-2">
                        <i class="bi bi-search"></i> {{ __('Search') }}
                    </button>
                </form>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead>
                    <tr class="text-gray-500 text-[11px] uppercase tracking-[0.2em] border-b border-gray-800/50">
                        <th class="px-8 py-5 font-bold">Transaction</th>
                        <th class="px-8 py-5 font-bold">Gateway</th>
                        <th class="px-8 py-5 font-bold">Amount</th>
                        <th class="px-8 py-5 font-bold text-center">Status</th>
                        <!--<th class="px-8 py-5 font-bold text-right">Action</th>-->
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    @forelse ($withdrawlogs as $key => $withdrawlog)
                    <tr class="hover:bg-gray-800/20 transition-all group">
                        <td class="px-8 py-6">
                            <span class="block text-white font-semibold text-sm tracking-tight">#{{ $withdrawlog->transaction_id }}</span>
                            <span class="text-gray-500 text-[10px] uppercase font-bold mt-1 tracking-wider">{{ $withdrawlog->created_at->format('d M, Y') }}</span>
                        </td>
                        <td class="px-8 py-6">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center text-orange-500">
                                    <i class="bi bi-credit-card-2-front"></i>
                                </div>
                                <span class="text-gray-300 text-sm font-medium">{{ __($withdrawlog->withdrawMethod->name) }}</span>
                            </div>
                        </td>
                        <td class="px-8 py-6">
                            <span class="text-white font-bold text-base">{{ number_format($withdrawlog->withdraw_amount, 2) }} <small class="text-gray-500">{{ $general->site_currency }}</small></span>
                            <div class="text-[10px] text-red-400 font-bold mt-1">
                                Fee: @if($withdrawlog->withdrawMethod->charge_type == 'percent')
                                    -{{ ($withdrawlog->withdraw_amount * $withdrawlog->withdraw_charge / 100) }}
                                @else
                                    -{{ number_format($withdrawlog->withdraw_charge, 2) }}
                                @endif {{ $general->site_currency }}
                            </div>
                        </td>
                        <td class="px-8 py-6 text-center">
                            @if ($withdrawlog->status == 1)
                                <span class="px-3 py-1 rounded-full bg-green-500/10 text-green-500 text-[9px] font-black uppercase tracking-widest border border-green-500/20">Success</span>
                            @elseif($withdrawlog->status == 2)
                                <span class="px-3 py-1 rounded-full bg-red-500/10 text-red-500 text-[9px] font-black uppercase tracking-widest border border-red-500/20">Rejected</span>
                            @else
                                <span class="px-3 py-1 rounded-full bg-orange-500/10 text-orange-500 text-[9px] font-black uppercase tracking-widest border border-orange-500/20">Pending</span>
                            @endif
                        </td>
                        <!--<td class="px-8 py-6 text-right">-->
                        <!--    <button class="details p-2.5 rounded-xl bg-gray-800/50 hover:bg-white hover:text-black text-gray-400 transition-all border border-gray-700/50" -->
                        <!--            data-user_data="{{ json_encode($withdrawlog->user_withdraw_prof) }}" -->
                        <!--            data-withdraw="{{ json_encode($withdrawlog) }}">-->
                        <!--        <i class="bi bi-eye-fill"></i>-->
                        <!--    </button>-->
                        <!--</td>-->
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-8 py-20 text-center text-gray-600 font-medium italic">No transactions found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($withdrawlogs->hasPages())
        <div class="p-8 border-t border-gray-800 bg-black/20">
            {{ $withdrawlogs->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('script')
<script>
    $(function() {
        'use strict'

        $('.details').on('click', function() {
            const modal = $('#details');
            const userData = $(this).data('user_data');
            const withdraw = $(this).data('withdraw');

            // Handle the dynamic data (loops through any fields saved in 'user_withdraw_prof')
            let detailsHtml = '';
            
            if (userData) {
                // Parse if it's a string, otherwise use as is
                const fields = typeof userData === 'string' ? JSON.parse(userData) : userData;
                
                Object.entries(fields).forEach(([key, value]) => {
                    // Prettify the key (e.g., account_number -> Account Number)
                    let label = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                    
                    detailsHtml += `
                        <div class="flex justify-between items-center p-4 bg-gray-800/50 rounded-2xl border border-gray-700/30">
                            <span class="text-gray-400 text-xs font-bold uppercase tracking-wider">${label}</span>
                            <span class="text-white text-sm font-semibold">${value || 'N/A'}</span>
                        </div>`;
                });
            }

            // Add Transaction ID at the bottom
            detailsHtml += `
                <div class="mt-4 flex justify-between items-center p-4 bg-orange-500/10 rounded-2xl border border-orange-500/20">
                    <span class="text-orange-500 text-xs font-bold uppercase tracking-wider">Transaction ID</span>
                    <span class="text-white text-xs font-mono">#${withdraw.transaction_id}</span>
                </div>`;

            modal.find('.withdraw-details').html(detailsHtml);
            modal.modal('show');
        });
    });
</script>
@endpush
