@extends('layouts.tech')

@section('content')
<div class="min-h-screen bg-gray-50 flex flex-col font-sans pb-24">
    <main class="flex-1 max-w-4xl mx-auto w-full p-4 py-6">
    
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-2xl font-black text-gray-900 flex items-center gap-2">
            <i data-lucide="wallet" class="text-[#109E38]"></i> Ledger Book
            </h1>
        </div>
        
        <div class="rounded-3xl p-6 text-white shadow-lg mb-6 relative overflow-hidden bg-gradient-to-br from-green-600 to-gray-900">
            <div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3"></div>
            
            <div class="flex justify-between items-start mb-2 relative z-10">
            <div>
                <p class="text-white/70 text-xs font-bold uppercase tracking-wider mb-1">Net Wallet Balance</p>
                <h2 class="text-4xl font-black mb-1">
                    {{ $net_balance >= 0 ? '+' : '' }}₹{{ number_format($net_balance) }}
                </h2>
                <p class="text-sm font-bold text-white/90">Instafix24 owes you (Transfer Pending)</p>
            </div>
            <div class="bg-white/20 p-3 rounded-2xl">
                <i data-lucide="wallet" class="w-8 h-8 text-white"></i>
            </div>
            </div>
        </div>

        <div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 mb-6 space-y-4">
            <h3 class="text-base font-black text-gray-900 mb-2 border-b border-gray-100 pb-2">Your Business Breakdown</h3>
            
            <div class="flex justify-between items-center">
            <span class="text-sm font-bold text-gray-600 flex items-center gap-2"><i data-lucide="arrow-up-right" class="w-4 h-4 text-green-500"></i> Total Business Done</span>
            <span class="text-sm font-black text-gray-900">₹{{ number_format($total_business) }}</span>
            </div>
            
            <div class="flex justify-between items-center">
            <span class="text-sm font-bold text-gray-600 flex items-center gap-2"><i data-lucide="arrow-down-right" class="w-4 h-4 text-red-500"></i> Platform Fee (15%)</span>
            <span class="text-sm font-black text-red-500">
                {{ $platform_fee <= 0 ? '-' : '' }}₹{{ number_format(abs($platform_fee)) }}
            </span>
            </div>
            
            <div class="flex justify-between items-center bg-gray-50 p-3 rounded-xl border border-gray-100 mt-2">
            <span class="text-sm font-black text-gray-900">Your Actual Earning</span>
            <span class="text-base font-black text-[#109E38]">₹{{ number_format($net_balance) }}</span>
            </div>
        </div>

        <div>
            <h3 class="text-lg font-black text-gray-900 mb-4 flex items-center gap-2">
            <i data-lucide="history" class="w-5 h-5 text-gray-400"></i> Wallet Transactions
            </h3>
            
            @forelse($transactions as $txn)
            <div class="bg-white p-5 rounded-2xl shadow-sm border {{ $txn->type == 'earning' ? 'border-green-100 border-l-4 border-l-green-500' : 'border-red-100 border-l-4 border-l-red-500' }} mb-4">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <h4 class="text-sm font-black text-gray-900">Job: {{ $txn->booking_id }}</h4>
                        <p class="text-[10px] font-bold text-gray-500 uppercase tracking-wider">{{ $txn->description }}</p>
                    </div>
                    <div class="text-right">
                        <h3 class="text-lg font-black {{ $txn->type == 'earning' ? 'text-green-600' : 'text-red-500' }}">
                            {{ $txn->type == 'earning' ? '+' : '' }}₹{{ number_format($txn->amount) }}
                        </h3>
                        <p class="text-[10px] text-gray-400 font-bold">{{ $txn->type == 'earning' ? 'Amount Added' : 'Fee Deducted' }}</p>
                    </div>
                </div>
                
                <p class="text-[11px] font-bold text-gray-400 flex items-center gap-1 mt-3">
                    <i data-lucide="clock" class="w-3 h-3"></i> {{ $txn->created_at->format('d M Y, h:i A') }}
                </p>
            </div>
            @empty
            <div class="text-center py-10 bg-white rounded-3xl border border-dashed border-gray-200">
                <i data-lucide="inbox" class="w-12 h-12 text-gray-300 mx-auto mb-3"></i>
                <h3 class="text-gray-500 font-black">No transactions yet</h3>
                <p class="text-xs font-bold text-gray-400 mt-1">Complete a job to see your earnings here.</p>
            </div>
            @endforelse

        </div>

    </main>
</div>
@endsection