{{-- 
    This is a reusable partial for displaying a cumulative financial summary.
    It expects a variable named $cumulativeData to be passed to it.
--}}

@if(!empty($cumulativeData))
    @php
        // Generate a unique ID for the collapse element to avoid conflicts.
        $snapshotId = 'snapshot-' . \Illuminate\Support\Str::random(8);
    @endphp

    <div class="card mb-4 shadow-lg border-dark">
        {{-- The card-header is now a clickable link to toggle the collapse --}}
        <a href="#{{ $snapshotId }}" class="card-header bg-dark text-white d-block" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="{{ $snapshotId }}">
            <h5 class="mb-0">
                <i class="fas fa-calculator"></i> Cumulative Financial Snapshot
                {{-- Add an icon to indicate it's collapsible --}}
                <i class="fas fa-chevron-down float-right"></i>
            </h5>
        </a>

        {{-- This div is the collapsible content. The "show" class makes it visible by default. --}}
        <div class="collapse" id="{{ $snapshotId }}">
            <div class="card-body p-0">
                <table class="table table-striped table-hover mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th>Metric</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Statement From</td>
                            <td>
                                @if($cumulativeData['startDate'])
                                    {{ $cumulativeData['startDate'] }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td>Statement To</td>
                            <td>
                                @if($cumulativeData['endDate'])
                                    {{ $cumulativeData['endDate'] }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td>Average Balance</td>
                            <td>₹ {{ number_format($cumulativeData['avgBalance'], 2) }}</td>
                        </tr>
                        <tr>
                            <td><strong>Adjusted Average Balance</strong></td>
                            <td><strong>₹ {{ number_format($cumulativeData['adjustedAvgBalance'], 2) }}</strong></td>
                        </tr>
                        <tr>
                            <td><strong>No. of EMI Bounces</strong></td>
                            <td><strong>{{ $cumulativeData['noOfEmiBounces'] }}</strong></td>
                        </tr>
                        <tr>
                            <td>Inward Cheque Bounces</td>
                            <td>{{ $cumulativeData['inwardChequeBounce'] }}</td>
                        </tr>
                        <tr>
                            <td>Outward Cheque Bounces</td>
                            <td>{{ $cumulativeData['outwardChequeBounce'] }}</td>
                        </tr>
                        <tr>
                            <td>Average Monthly EMI</td>
                            <td>₹ {{ number_format($cumulativeData['avgMonthlyEmi'], 2) }}</td>
                        </tr>
                        <tr>
                            <td>Speculative Trade Count</td>
                            <td>{{ $cumulativeData['speculativeTradeCount'] }}</td>
                        </tr>
                        <tr>
                            <td>Speculative Trade Amount</td>
                            <td>₹ {{ number_format($cumulativeData['speculativeTradeAmount'], 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endif