{{-- 
    This view creates a nested accordion structure.
    1. OUTER ACCORDION: Loops through each timestamp group. Each panel represents a file upload.
    2. INNER ACCORDION: Inside each timestamp panel, this loops through the accounts from that specific file.
--}}

{{-- Outer Accordion container for Timestamp Groups --}}
<div id="timestamp-accordion-{{ $userType }}" class="accordion">

    @foreach($accounts as $timestamp => $dataGroup)
        @php
            $timestampId = $userType . '-timestamp-' . $loop->index;
            // NEW: Get the overall and account data from the dataGroup
            $overallAnalysis = $dataGroup['overall'];
            $accountGroup = $dataGroup['accounts'];
        @endphp

        <div class="card mb-3 bg-light border">
            {{-- Outer Accordion Header: Shows the timestamp and account count for the file upload --}}
            <div class="card-header" id="heading-{{ $timestampId }}">
                <h5 class="mb-0">
                    <button class="btn btn-link text-secondary w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-{{ $timestampId }}" aria-expanded="{{ $loop->first ? 'true' : 'false' }}">
                        <div style="font-size: large; color:black">
                             BANK ANALYTICS: updated on {{ \Carbon\Carbon::parse($timestamp)->format('d F Y, h:i:s A') }}
                            <span class="badge badge-primary ml-2">{{ count($accountGroup) }} Accounts</span>
                        </div>
                    </button>
                </h5>
            </div>

            {{-- Outer Accordion Body: Contains the inner accordion of bank accounts for this timestamp --}}
            <div id="collapse-{{ $timestampId }}" class="collapse" data-parent="#timestamp-accordion-{{ $userType }}">
                <div class="card-body">
                    <div class="card mb-4 shadow border-primary">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">
                                <i class="fas fa-chart-pie"></i> <strong>Overall Analysis Summary</strong>
                            </h5>
                        </div>
                        <div class="card-body">
                            {{-- We can re-use the same partials used inside the account accordion --}}
                            <ul class="nav nav-pills mb-3" role="tablist">
                                <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#summary-overall-{{ $timestampId }}">Overall Summary</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#salary-overall-{{ $timestampId }}">Overall Salary List</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#bounce-overall-{{ $timestampId }}">Overall Bounces</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#risk-overall-{{ $timestampId }}">Overall Risk Events</a></li>
                            </ul>

                            <div class="tab-content">
                                <div id="summary-overall-{{ $timestampId }}" class="tab-pane active"><br>
                                    @include('admin.consumer-application.scorecard.partials._pirimid_summary_table', ['account' => $overallAnalysis])
                                </div>
                                <div id="salary-overall-{{ $timestampId }}" class="tab-pane fade"><br>
                                    @include('admin.consumer-application.scorecard.partials._salary_table', ['account' => $overallAnalysis])
                                </div>
                                <div id="bounce-overall-{{ $timestampId }}" class="tab-pane fade"><br>
                                    @include('admin.consumer-application.scorecard.partials._bounce_transactions_table', ['account' => $overallAnalysis])
                                </div>
                                <div id="risk-overall-{{ $timestampId }}" class="tab-pane fade"><br>
                                    @include('admin.consumer-application.scorecard.partials._risk_events_table', ['account' => $overallAnalysis, 'accountId' => 'overall-' . $timestampId])
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- INNER Accordion for Bank Accounts --}}
                    {{-- Note the unique ID using the parent loop's index --}}
                    <div id="account-accordion-{{ $timestampId }}" class="accordion mt-2">
                        @foreach($accountGroup as $account)
                            @php
                                // Create a globally unique ID for each account using both loop indexes
                                $accountId = $userType . '-' . $loop->parent->index . '-' . $loop->index;
                            @endphp

                            <div class="card mb-2 shadow-sm">

                                {{-- Inner Accordion Header: Shows individual account summary --}}
                                <div class="card-header" id="heading-{{ $accountId }}">
                                    <h5 class="mb-0">
                                        <button style="font-size: large;" class="btn btn-link text-left w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapse-{{ $accountId }}" aria-expanded="false">
                                            
                                            <div class="row w-100 align-items-center">
                                                
                                                {{-- Column 1: Applicant, Account Holder, and Account Number --}}
                                                <div class="col-md-6 mb-2 mb-md-0">
                                                    <div>
                                                        <strong class="text-primary" style="min-width: 150px; display: inline-block;">
                                                            📝 {{ $applicationNameLabel ?? 'Name' }}:
                                                        </strong>
                                                        <span class="text-dark">{{ $applicationName ?? 'N/A' }}</span>
                                                    </div>
                                                    <div>
                                                        <strong class="text-primary" style="min-width: 150px; display: inline-block;">👤 Account Holder:</strong>
                                                        <span class="text-dark">{{ $account['name'] ?? 'N/A' }}</span>

                                                    </div>
                                                    <div>
                                                        <strong class="text-primary" style="min-width: 150px; display: inline-block;">💳 Acc. Number:</strong>
                                                        <span class="text-dark">{{ $account['accountNumber'] ?? 'N/A' }}</span>
                                                    </div>
                                                </div>

                                                {{-- Column 2: Bank and Account Type --}}
                                                <div class="col-md-6">
                                                    <div>
                                                        <strong class="text-primary" style="min-width: 110px; display: inline-block;">🏦 Bank:</strong>
                                                        <span class="text-dark">{{ $account['bankName'] ?? 'N/A' }}</span>
                                                    </div>
                                                    <div>
                                                        <strong class="text-primary" style="min-width: 110px; display: inline-block;">📄 Acc. Type:</strong>
                                                        <span class="text-dark">{{ $account['accountType'] ?? 'N/A' }}</span>
                                                    </div>
                                                </div>

                                            </div>

                                        </button>
                                    </h5>
                                </div>

                                {{-- Inner Accordion Body: Contains nested tabs with detailed tables --}}
                                <div id="collapse-{{ $accountId }}" class="collapse" data-parent="#account-accordion-{{ $timestampId }}">
                                    <div class="card-body">
                                        {{-- Nested Tabs Navigation --}}
                                        <ul class="nav nav-pills mb-3" role="tablist">
                                            <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#summary-{{ $accountId }}">Account-Wise Summary</a></li>
                                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#salary-{{ $accountId }}">Salary</a></li>
                                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#bounce-{{ $accountId }}">Bounce Transactions</a></li>
                                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#risk-{{ $accountId }}">Risk Events</a></li>
                                        </ul>

                                        {{-- Nested Tabs Content --}}
                                        <div class="tab-content">
                                            <div id="summary-{{ $accountId }}" class="tab-pane active"><br>
                                                @include('admin.consumer-application.scorecard.partials._pirimid_summary_table', ['account' => $account])
                                            </div>
                                            <div id="salary-{{ $accountId }}" class="tab-pane fade"><br>
                                                @include('admin.consumer-application.scorecard.partials._salary_table', ['account' => $account])
                                            </div>
                                            <div id="bounce-{{ $accountId }}" class="tab-pane fade"><br>
                                                @include('admin.consumer-application.scorecard.partials._bounce_transactions_table', ['account' => $account])
                                            </div>
                                            <div id="risk-{{ $accountId }}" class="tab-pane fade"><br>
                                                @include('admin.consumer-application.scorecard.partials._risk_events_table', ['account' => $account, 'accountId' => $accountId])
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>