@extends('layouts.user', ['heading' => 'Withdrawals / निकासी'])

@section('content')
    @if(session('status'))
        <div class="mb-4 rounded bg-emerald-100 p-3 text-emerald-800">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded bg-rose-100 p-3 text-rose-800">
            <ul class="list-disc pl-5 text-sm">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
        <div class="rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">Withdrawable Balance</div>
            <div class="text-2xl font-bold">₹ {{ number_format((float) ($wallet->withdrawable_balance ?? 0), 2) }}</div>
            <div class="mt-2 text-xs">Min Withdrawal: ₹ {{ number_format($minWithdrawal ?? 0, 2) }}</div>
        </div>
        <div class="rounded-2xl bg-white p-4 shadow">
            <div class="text-xs text-slate-500">KYC Status</div>
            <div class="text-lg font-semibold">{{ $kyc?->status ?? 'not_submitted' }}</div>
            @if($kyc?->rejection_reason)
                <div class="mt-1 text-xs text-rose-600">{{ $kyc->rejection_reason }}</div>
            @endif
        </div>
        <div class="rounded-2xl bg-white p-4 shadow">
            <div class="text-xs text-slate-500">Charges</div>
            <div class="mt-1 text-sm">TDS: {{ $tdsPercent }}%</div>
            <div class="text-sm">Service Charge: {{ $chargePercent }}%</div>
        </div>
    </div>

    <div class="mt-6 grid gap-4 md:grid-cols-3">
        <form method="POST" action="{{ route('user.withdrawals.store') }}" class="rounded-2xl bg-white p-4 shadow md:col-span-2">
            @csrf
            <div class="grid gap-3 md:grid-cols-2">
                <div>
                    <label class="mb-1 block text-sm font-medium">Amount</label>
                    <input id="withdrawAmount" name="amount" class="w-full rounded border p-2" />
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium">OTP</label>
                    <input name="otp" class="w-full rounded border p-2" />
                </div>
            </div>
            <div class="mt-3 grid gap-2 text-sm text-slate-600 md:grid-cols-3">
                <div>TDS: ₹ <span id="tdsAmount">0.00</span></div>
                <div>Charge: ₹ <span id="chargeAmount">0.00</span></div>
                <div class="font-semibold text-slate-900">Net: ₹ <span id="netAmount">0.00</span></div>
            </div>
            <div class="mt-3">
                <button class="rounded bg-emerald-600 px-4 py-2 text-white">Submit</button>
            </div>
        </form>

        <form method="POST" action="{{ route('user.withdrawals.otp') }}" class="rounded-2xl bg-white p-4 shadow">
            @csrf
            <div class="mb-2 text-sm text-slate-500">Send OTP to registered mobile/email.</div>
            <button class="rounded border px-4 py-2">Send OTP</button>
        </form>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-3">
        @forelse($withdrawals as $withdrawal)
            <div class="rounded-2xl bg-white p-4 shadow">
                <div class="flex items-center justify-between">
                    <div class="font-semibold">{{ $withdrawal->request_number }}</div>
                    <div class="text-xs text-slate-500">{{ optional($withdrawal->requested_at)->format('d M Y') }}</div>
                </div>
                <div class="mt-1 text-sm text-slate-600">Amount: ₹ {{ number_format((float) $withdrawal->amount, 2) }}</div>
                <div class="text-sm text-slate-600">Net: ₹ {{ number_format((float) $withdrawal->net_amount, 2) }}</div>
                <div class="mt-1 text-xs text-slate-500">Status: {{ $withdrawal->status }}</div>
            </div>
        @empty
            <div class="rounded-2xl bg-white p-4 text-center text-slate-500">No withdrawals found.</div>
        @endforelse
    </div>

    <div class="mt-4">{{ $withdrawals->links() }}</div>

    <script>
        (function () {
            const amountInput = document.getElementById('withdrawAmount');
            const tdsPercent = {{ $tdsPercent ?? 0 }};
            const chargePercent = {{ $chargePercent ?? 0 }};
            const tdsEl = document.getElementById('tdsAmount');
            const chargeEl = document.getElementById('chargeAmount');
            const netEl = document.getElementById('netAmount');

            const updateCalc = () => {
                const amount = parseFloat(amountInput.value || '0');
                const tds = (amount * tdsPercent) / 100;
                const charge = (amount * chargePercent) / 100;
                const net = amount - tds - charge;
                tdsEl.textContent = tds.toFixed(2);
                chargeEl.textContent = charge.toFixed(2);
                netEl.textContent = (net > 0 ? net : 0).toFixed(2);
            };

            amountInput.addEventListener('input', updateCalc);
        })();
    </script>
@endsection