@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card bg-dark">
                <div class="card-header text-white">
                    <h3 class="text-warning">Target Bonuses</h3>
                    <div class="alert alert-warning">
                        <strong class="text-dark">Total Team Deposits:</strong> 
                        <span class="text-dark">${{ number_format($totalTeamDeposits, 2) }}</span>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        @foreach($targetBonuses as $bonus)
                            <div class="col-md-4 mb-4">
                                <div class="card h-100 bg-dark">
                                    <div class="card-body">
                                        <h5 class="card-title text-warning">Target Bonus</h5>
                                        <p class="card-text text-white">
                                            <strong>Target Amount:</strong> 
                                            <span class="text-warning">${{ number_format($bonus->target_amount, 2) }}</span><br>
                                            <strong>Bonus Amount:</strong> 
                                            <span class="text-warning">${{ number_format($bonus->bonus_amount, 2) }}</span>
                                        </p>
                                        
                                        @php
                                            $userBonus = $userTargetBonuses->where('target_bonus_id', $bonus->id)->first();
                                            $canRedeem = $totalTeamDeposits >= $bonus->target_amount && !$userBonus;
                                        @endphp

                                        @if($userBonus)
                                            <div class="alert alert-success">
                                                <i class="fas fa-check-circle"></i> 
                                                <span class="text-dark">Bonus Redeemed</span>
                                            </div>
                                        @else
                                            <form action="{{ route('bonuses.redeem', $bonus->id) }}" method="POST">
                                                @csrf
                                                <button type="submit" class="btn btn-warning w-100" 
                                                    {{ $canRedeem ? '' : 'disabled' }}>
                                                    {{ $canRedeem ? 'Redeem Bonus' : 'Target Not Reached' }}
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection