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

@section('content2')

<div class="min-h-screen bg-zinc-50 dark:bg-zinc-950 p-4 md:p-8 transition-colors duration-300">
    <div class="max-w-6xl mx-auto space-y-8">

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-end">
            <div class="lg:col-span-4">
                <a href="{{ route('user.dashboard') }}" class="inline-flex items-center text-zinc-500 hover:text-blue-600 transition-colors group mb-4">
                    <i data-lucide="arrow-left" class="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform"></i> 
                    <span class="text-[10px] font-black uppercase tracking-[0.2em]">{{ __('Back to Terminal') }}</span>
                </a>
                <h4 class="text-zinc-900 dark:text-white text-3xl font-black tracking-tighter uppercase italic">{{ __('Affiliate Center') }}</h4>
                <p class="text-blue-600 dark:text-blue-400 text-[10px] font-black uppercase tracking-[0.3em] mt-1">{{ __('Network Expansion') }}</p>
            </div>

            <div class="lg:col-span-8 w-full">
                <div class="relative group">
                    <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 mb-2 ml-1">
                        {{ __('Your Unique Referral Gateway') }}
                    </label>
                    <div class="flex items-center bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl overflow-hidden focus-within:ring-2 focus-within:ring-blue-600/40 transition-all shadow-sm">
                        <input type="text" id="refer-link" 
                            class="flex-1 bg-transparent border-none px-4 py-4 text-zinc-900 dark:text-zinc-200 text-sm focus:ring-0 placeholder:text-zinc-700 font-bold"
                            value="{{ route('user.register', @Auth::user()->username) }}" readonly>
                        
                        <button type="button" 
                            class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 font-black text-[10px] uppercase tracking-widest transition-all active:scale-95 flex items-center gap-2"
                            onclick="copyLink()">
                            <i data-lucide="copy" class="w-3.5 h-3.5"></i>
                            <span id="copytext">{{ __('Copy Link') }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-6 rounded-[2rem] shadow-sm">
                <p class="text-[9px] font-black uppercase tracking-widest text-zinc-400 mb-1 leading-none">{{ __('Total Commission') }}</p>
                <div class="flex items-baseline gap-1">
                    <span class="text-2xl font-black text-zinc-900 dark:text-white italic">{{ number_format($commison->sum('amount'), 2) }}</span>
                    <span class="text-[10px] font-bold text-blue-600">{{ @$general->site_currency }}</span>
                </div>
            </div>
            </div>

        <div class="relative bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-[2.5rem] overflow-hidden shadow-xl">
            <div class="absolute -top-24 -left-24 w-64 h-64 bg-blue-600/5 dark:bg-blue-500/5 blur-[100px] rounded-full"></div>

            <div class="relative z-10 p-6 md:p-10">
                <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-6 mb-10">
                    <div>
                        <h5 class="text-zinc-900 dark:text-white font-black text-lg uppercase tracking-tighter italic">{{ __('Commission Ledger') }}</h5>
                        <p class="text-zinc-400 text-[10px] font-bold mt-1 uppercase tracking-widest">{{ __('Real-time affiliate network growth') }}</p>
                    </div>

                    <form action="" method="get" class="flex flex-wrap items-center gap-3">
                        <div class="relative">
                            <input type="date" name="date"
                                class="bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 text-zinc-900 dark:text-zinc-400 rounded-xl px-4 py-3 text-[10px] font-black uppercase focus:outline-none focus:ring-2 focus:ring-blue-600/40 transition-all shadow-inner">
                        </div>
                        <button type="submit"
                            class="bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 font-black px-6 py-3 rounded-xl transition-all text-[10px] uppercase tracking-widest hover:opacity-90 shadow-lg">
                            {{ __('Filter History') }}
                        </button>
                    </form>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                            <tr class="border-b border-zinc-100 dark:border-zinc-800">
                                <th class="px-4 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400">{{ __('Source User') }}</th>
                                <th class="px-4 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400">{{ __('Payout') }}</th>
                                <th class="px-4 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400">{{ __('Transaction Note') }}</th>
                                <th class="px-4 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 text-right">{{ __('Date Recorded') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-zinc-50 dark:divide-zinc-800/50">
                            @forelse ($commison as $item)
                                <tr class="group hover:bg-zinc-50 dark:hover:bg-zinc-950/50 transition-colors">
                                    <td class="px-4 py-6">
                                        <div class="flex items-center gap-3">
                                            <div class="w-10 h-10 rounded-xl bg-blue-600/10 border border-blue-600/20 flex items-center justify-center text-blue-600 text-xs font-black shadow-sm">
                                                {{ strtoupper(substr(@$item->commissionFrom->username, 0, 1)) }}
                                            </div>
                                            <span class="text-zinc-900 dark:text-zinc-200 text-sm font-black italic">{{ @$item->commissionFrom->username }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-6 font-mono text-sm font-black text-green-600 dark:text-green-400">
                                        +{{ number_format($item->amount, 2) }} <span class="text-[10px]">{{ @$general->site_currency }}</span>
                                    </td>
                                    <td class="px-4 py-6">
                                        <span class="text-zinc-500 dark:text-zinc-400 text-xs font-bold uppercase tracking-tight">{{ $item->purpouse }}</span>
                                    </td>
                                    <td class="px-4 py-6 text-right">
                                        <span class="text-zinc-400 dark:text-zinc-500 text-[10px] font-black uppercase italic">{{ $item->created_at->format('M d, Y') }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td class="px-4 py-20 text-center" colspan="100%">
                                        <div class="flex flex-col items-center">
                                            <i data-lucide="database-zap" class="w-10 h-10 text-zinc-200 dark:text-zinc-800 mb-4"></i>
                                            <span class="text-zinc-400 text-[10px] font-black uppercase tracking-widest">{{ __('No network data detected') }}</span>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($commison->hasPages())
                <div class="mt-10 pt-8 border-t border-zinc-100 dark:border-zinc-800">
                    {{ $commison->links('backend.partial.paginate') }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = document.getElementById('refer-link');
        navigator.clipboard.writeText(link.value);
        const btnText = document.getElementById('copytext');
        btnText.innerText = '{{ __('Copied!') }}';
        setTimeout(() => {
            btnText.innerText = '{{ __('Copy Link') }}';
        }, 2000);
    }
</script>

@endsection