@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>

        <table class="table table-bordered">
            <thead class="table-dark">
                <tr>
                    <th>क्रम संख्या</th>
                    <th>क्रेडिट</th>
                    <th>डेबिट</th>
                    {{-- <th>पिछला बैलेंस</th> --}}
                    <th>वर्तमान बैलेंस</th>
                    <th>लेन-देन मोड</th>
                    <th>टिप्पणी</th>
                    <th>तारीख</th>
                </tr>

            </thead>
            <tbody>
                @forelse ($trans as $index => $tran)
                    @php
                        $rowClass = $tran->credit > 0 ? 'credit-row' : ($tran->debit > 0 ? 'debit-row' : '');
                    @endphp
                    <tr class="{{ $rowClass }}">
                        <td>{{ $index + 1 }}</td>
                        <td class="{{ $tran->credit == 0 ? 'zero-value' : 'text-success bold-font' }}">₹ {{ $tran->credit }}</td>
                        <td class="{{ $tran->debit == 0 ? 'zero-value' : 'text-danger bold-font' }}">₹ {{ $tran->debit }}</td>
                        {{-- <td>₹ {{ $tran->debit + $tran->final_amount }}</td> --}}
                        <td class="highlight-balance">₹ {{ $tran->final_amount }}</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>



@endsection