@php
    $procSlug = \Illuminate\Support\Str::slug($processor['name'], '_');
@endphp
<div class="project-box mb-3" id="processor-{{ $procSlug }}">
    <div class="d-flex align-items-center justify-content-between mb-2">
        <h5 class="mb-0 font-size-16">{{ $processor['name'] }} <i class="bx bx-info-circle text-muted" title="Processor section"></i></h5>
    </div>

    {{-- Sub-tabs: Summary | Details | Profitability --}}
    <ul class="nav nav-tabs project-tab mb-0" id="tabs-{{ $procSlug }}" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active processor-sub-tab" type="button" role="tab"
                    data-processor="{{ $processor['name'] }}" data-tab="summary"
                    data-bs-toggle="tab" data-bs-target="#{{ $procSlug }}-summary">
                Summary
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link processor-sub-tab" type="button" role="tab"
                    data-processor="{{ $processor['name'] }}" data-tab="details"
                    data-bs-toggle="tab" data-bs-target="#{{ $procSlug }}-details">
                Details
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link processor-sub-tab" type="button" role="tab"
                    data-processor="{{ $processor['name'] }}" data-tab="profitability"
                    data-bs-toggle="tab" data-bs-target="#{{ $procSlug }}-profitability">
                Profitability
            </button>
        </li>
    </ul>

    <div class="tab-content" id="tabContent-{{ $procSlug }}">
        {{-- Summary Tab (loaded by default) --}}
        <div class="tab-pane fade show active" id="{{ $procSlug }}-summary" role="tabpanel">
            <div class="p-3" data-summary-container="{{ $processor['name'] }}">
                @include('admin.residuals.partials._summary-table', [
                    'data' => collect([]),
                    'totals' => null,
                    'processor' => $processor['name'],
                    'yearMonth' => $yearMonth,
                    'sheetName' => '',
                    'alphaFilter' => 'ALL',
                    'hideInactive' => false,
                ])
            </div>
        </div>

        {{-- Details Tab (AJAX loaded) --}}
        <div class="tab-pane fade" id="{{ $procSlug }}-details" role="tabpanel">
            <div class="p-3 text-center text-muted" data-details-container="{{ $processor['name'] }}">
                <i class="bx bx-loader-alt bx-spin"></i> Click to load details...
            </div>
        </div>

        {{-- Profitability Tab (AJAX loaded) --}}
        <div class="tab-pane fade" id="{{ $procSlug }}-profitability" role="tabpanel">
            <div class="p-3 text-center text-muted" data-profitability-container="{{ $processor['name'] }}">
                <i class="bx bx-loader-alt bx-spin"></i> Click to load profitability data...
            </div>
        </div>
    </div>
</div>