@extends('new_app.header')
@section('content')
<style>
    .home {
        padding: 0px;
    }
</style>

<section class="container-fluid p-2 shadow bg-body radius-8 mt-3">
    <div class="table-responsive">
        <style>
            .bold-font {
                font-weight: 900;
            }

            /* यदि Credit या Debit 0 है तो Text को Dark कर दो */
            .zero-value {
                color: #6c757d !important;
                /* Bootstrap text-dark */
            }

            /* Debit के लिए हल्का लाल बैकग्राउंड */
            .debit-row {
                background-color: rgba(255, 0, 0, 0.1);
            }

            /* Credit के लिए हल्का हरा बैकग्राउंड */
            .credit-row {
                background-color: rgba(0, 255, 0, 0.1);
            }

            /* बैलेंस हाईलाइट */
            .highlight-balance {
                background-color: rgba(255, 215, 0, 0.2);
                /* हल्का गोल्ड */
                font-weight: 900;
                border-radius: 5px;
                padding: 5px;
            }
        </style>
        @php

        $total_bonus = $trans->sum('credit');
        @endphp
        <section class="coming-soon container-fluid p-5 d-flex flex-column align-items-center justify-content-center">
            <h2 class="text-white text-shadow">🚀 कुल बोनस 🚀</h2>
            <p class="text-white fs-5">आपने अभी तक कुल इतना बोनस प्राप्त किया है:</p>

            <!-- Animated Pulse Effect -->
            <div class="pulse-animation mt-4">
                <span>₹{{ $total_bonus }}</span>

            </div>
        </section>

        <table class="table table-bordered mt-3">
            <thead class="table-dark">
                <tr>
                    <th>क्रम_संख्या</th>
                    <th>क्रेडिट</th>
                    <th>लेन-देनमोड</th>
                    <th>टिप्पणी</th>
                    <th>तारीख</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($trans as $index => $tran)

                <tr class="credit-row">
                    <td>{{ $index + 1 }}</td>
                    <td class="{{ $tran->credit == 0 ? 'zero-value' : 'text-success bold-font' }}">₹ {{ $tran->credit }}
                    </td>
                    <td>{{ ucfirst($tran->transaction_mode) }}</td>
                    <td>{{ $tran->comment }}</td>
                    <td>{{ \Carbon\Carbon::parse($tran->date)->format('d-m-Y') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center text-muted">No Transactions Found</td>
                </tr>
                @endforelse
            </tbody>
        </table>

    </div>
</section>

<style>
    .table {
        background-color: #2196F3;

    }

    .form-control {
        border-radius: 4px;
    }

    .btn-link {
        color: #0dcaf0;
    }

    .content-wrapper {
        padding: 5px;
    }

    th {

        text-align: center;
    }

    td {
        font-size: 14px;
        text-align: center;
    }
</style>
<style>
    .coming-soon {
        text-align: center;
        background: linear-gradient(135deg, #008eff, #9abdd9);
        color: white;
        min-height: 30vh;
        border-radius: 12px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }

    .countdown-timer {
        font-size: 2rem;
        font-weight: bold;
        margin-top: 20px;
    }

    .pulse-animation {
        font-size: 1.5rem;
        font-weight: bold;
        color: white;
        background: rgba(255, 255, 255, 0.2);
        padding: 10px 20px;
        border-radius: 8px;
        display: inline-block;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }

        50% {
            transform: scale(1.1);
            opacity: 1;
        }

        100% {
            transform: scale(1);
            opacity: 0.8;
        }
    }
</style>


@endsection