@extends('admin.layouts.app')

@section('title', 'Bonus Records')

@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="text-warning">
                <i class="fas fa-gift me-2"></i>Bonus Records
            </h2>
        </div>

        <!-- Search Input -->
        <div class="mb-4">
            <label for="searchInput" class="form-label text-warning"><span>Search</span> Bonus Records</label>
            <input type="text" id="searchInput" class="form-control bg-dark text-white border-warning"
                placeholder="<span>Search</span> by User Name, Email, Bonus Name, Amount, or Percentage..."
                style="max-width: 300px;">
        </div>

        <div class="card bg-dark border-warning">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-dark table-hover" id="bonusRecordsTable">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>User Name</th>
                                <th>User Email</th>
                                <th>Bonus Amount</th>
                                <th>Previous Balance</th>
                                <th>New Balance</th>
                                <th>Target Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($bonusRecords as $bonusRecord)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($bonusRecord->redeemed_at)->format('Y-m-d H:i') }}</td>
                                    <td>{{ $bonusRecord->user_name ?? 'N/A' }}</td>
                                    <td>{{ $bonusRecord->user_email ?? 'N/A' }}</td>
                                    <td>${{ number_format($bonusRecord->bonus_amount, 2) }}</td>
                                    <td>${{ number_format($bonusRecord->previous_balance, 2) }}</td>
                                    <td>${{ number_format($bonusRecord->new_balance, 2) }}</td>
                                    <td>${{ number_format($bonusRecord->target_amount, 2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="text-center" data-translate="no_bonus_records">No bonus records found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-center mt-4">
                    
                </div>
            </div>
        </div>
    </div>

@section('scripts')
    <script>
        document.getElementById('searchInput').addEventListener('input', function() {
            const searchValue = this.value.toLowerCase();
            const table = document.getElementById('bonusRecordsTable');
            const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

            for (let row of rows) {
                const cells = row.getElementsByTagName('td');
                let match = false;

                // Check columns: User Name (1), User Email (2), Bonus Name (3), Bonus Amount (4), Percentage (9)
                for (let i of [1, 2, 3, 4, 9]) {
                    if (cells[i] && cells[i].textContent.toLowerCase().includes(searchValue)) {
                        match = true;
                        break;
                    }
                }

                row.style.display = match ? '' : 'none';
            }
        });
    </script>
@endsection
@endsection