@extends('layouts.franchise', ['heading' => 'Commission / कमीशन'])

@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-slate-700 to-slate-900 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">Commission Wallet</div>
            <div class="text-2xl font-bold">₹ {{ number_format((float) ($franchise->wallet_balance ?? 0), 2) }}</div>
        </div>

        <form method="POST" action="{{ route('franchise.commission.withdraw') }}" class="rounded-2xl bg-white p-4 shadow">
            @csrf
            <div class="mb-2 font-semibold">Request Withdrawal</div>
            <input name="amount" type="number" step="0.01" min="1" placeholder="Amount" class="mb-2 w-full rounded border p-2 text-sm" required>
            <button class="w-full rounded bg-emerald-600 px-4 py-2 text-sm text-white">Submit</button>
        </form>
    </div>

    <div class="mt-6">
        <div class="mb-2 font-semibold">Commission History</div>
        <div class="grid grid-cols-1 gap-3">
            @forelse($transactions as $txn)
                <div class="rounded-2xl bg-white p-4 shadow">
                    <div class="flex items-center justify-between">
                        <div class="font-semibold">{{ $txn->transaction_type }}</div>
                        <div class="text-xs text-slate-500">{{ optional($txn->transacted_at)->format('d M Y, h:i A') }}</div>
                    </div>
                    <div class="mt-1 text-sm text-slate-600">₹ {{ number_format((float) $txn->amount, 2) }}</div>
                    <div class="text-xs text-slate-500">Ref: {{ $txn->reference }}</div>
                </div>
            @empty
                <div class="rounded-2xl bg-white p-4 text-center text-slate-500">No commission transactions found.</div>
            @endforelse
        </div>
        <div class="mt-4">{{ $transactions->links() }}</div>
    </div>

    <div class="mt-6">
        <div class="mb-2 font-semibold">Withdrawal Requests</div>
        <div class="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">₹ {{ number_format((float) $withdrawal->amount, 2) }}</div>
                        <div class="text-xs text-slate-500">{{ $withdrawal->status }}</div>
                    </div>
                    <div class="mt-1 text-xs text-slate-500">Requested: {{ optional($withdrawal->requested_at)->format('d M Y') }}</div>
                </div>
            @empty
                <div class="rounded-2xl bg-white p-4 text-center text-slate-500">No withdrawal requests.</div>
            @endforelse
        </div>
        <div class="mt-4">{{ $withdrawals->links() }}</div>
    </div>
@endsection