{{-- Portfolio risk intelligence — inline charts, map, and clickable report links --}}
<div class="dd-attention-panel" id="dd-attention-panel" data-report-mode="full" aria-live="polite">
    <div class="dd-attention-panel__bar">
        <div class="dd-attention-panel__left">
            <span class="dd-attention-panel__icon" aria-hidden="true"><i class="fas fa-chart-line"></i></span>
            <div>
                <h2 class="dd-attention-panel__title">
                    <a href="{{ route('dashboard.portfolio-intelligence') }}" class="dd-attention-panel__title-link" id="dd-attention-title-link">
                        Portfolio risk intelligence
                    </a>
                </h2>
            </div>
        </div>
        <div class="dd-attention-panel__tools">
            @unless ($hideBudgetYearSelect ?? false)
                <div class="dd-attention-year-field">
                    <label for="dd-attention-year">Budget year</label>
                    <select id="dd-attention-year" class="form-control dd-attention-year-select">
                        @foreach (($budgetYears ?? []) as $yearOption)
                            <option value="{{ $yearOption['id'] }}" @selected(($defaultBudgetYear ?? '') === $yearOption['id'])>
                                {{ $yearOption['label'] }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @endunless
            <button type="button" class="dd-attention-refresh" id="dd-attention-refresh" title="Refresh">
                <i class="fas fa-sync-alt" aria-hidden="true"></i>
            </button>
        </div>
    </div>

    <div class="dd-attention-body" id="dd-attention-body">
        <div class="dd-attention-loading" id="dd-attention-loading">
            <div class="dd-attention-spinner" aria-hidden="true"></div>
            <span>Loading portfolio indicators…</span>
        </div>
        <div class="dd-attention-error" id="dd-attention-error" hidden>
            <i class="fas fa-exclamation-circle"></i>
            <span id="dd-attention-error-text">Could not load scheme indicators.</span>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="dd-attention-retry">Retry</button>
        </div>

        <div class="dd-attention-content" id="dd-attention-content" hidden>
            <div class="dd-attention-kpi-strip" id="dd-attention-kpi-strip"></div>

            <div class="dd-attention-grid dd-attention-grid--charts">
                <a class="dd-attention-card dd-attention-card--link" href="{{ route('dashboard.portfolio-intelligence') }}?section=severity" data-section="severity">
                    <div class="dd-attention-card__head">
                        <h3 class="dd-attention-card__title"><i class="fas fa-shield-alt"></i> Severity mix</h3>
                        <span class="dd-attention-card__open"><i class="fas fa-external-link-alt"></i></span>
                    </div>
                    <div class="dd-attention-chart-wrap">
                        <canvas id="dd-attention-chart-severity" height="200" aria-label="Scheme severity distribution"></canvas>
                    </div>
                </a>
                <a class="dd-attention-card dd-attention-card--link" href="{{ route('dashboard.portfolio-intelligence') }}?section=indicators" data-section="indicators">
                    <div class="dd-attention-card__head">
                        <h3 class="dd-attention-card__title"><i class="fas fa-tags"></i> Risk indicators</h3>
                        <span class="dd-attention-card__open"><i class="fas fa-external-link-alt"></i></span>
                    </div>
                    <div class="dd-attention-chart-wrap">
                        <canvas id="dd-attention-chart-indicators" height="200" aria-label="Attention indicator counts"></canvas>
                    </div>
                </a>
                <div class="dd-attention-card dd-attention-card--trend">
                    <div class="dd-attention-card__head">
                        <h3 class="dd-attention-card__title"><i class="fas fa-route"></i> Physical progress trajectory</h3>
                    </div>
                    <div class="dd-attention-trend-chips" id="dd-attention-trend-chips"></div>
                </div>
            </div>

            <div class="dd-attention-section">
                <h3 class="dd-attention-section__title"><i class="fas fa-filter"></i> Filter by indicator</h3>
                <div class="dd-attention-indicators" id="dd-attention-indicators" role="tablist" aria-label="Filter by indicator"></div>
            </div>

            <div class="dd-attention-grid dd-attention-grid--map">
                <div class="dd-attention-card dd-attention-card--map">
                    <div class="dd-attention-card__head">
                        <h3 class="dd-attention-card__title"><i class="fas fa-map-marked-alt"></i> Sindh — critical &amp; warning hotspots</h3>
                        <a class="dd-attention-card__report-link" href="{{ route('dashboard.portfolio-intelligence') }}?section=map" data-section="map" title="Open map report">
                            <i class="fas fa-external-link-alt"></i> Full report
                        </a>
                        <div class="dd-attention-map-legend" id="dd-attention-map-legend">
                            <span class="dd-attention-map-legend__item dd-attention-map-legend__item--high">Critical scheme</span>
                            <span class="dd-attention-map-legend__item dd-attention-map-legend__item--mid">Warning scheme</span>
                        </div>
                    </div>
                    <div id="dd-attention-sindh-map" class="dd-attention-sindh-map" role="img" aria-label="Sindh map with district risk intensity"></div>
                    <div class="dd-attention-map-fallback" id="dd-attention-map-fallback" hidden>
                        <i class="fas fa-map"></i><span>Map could not be loaded. See district table below.</span>
                    </div>
                    <div class="dd-map-scheme-detail" id="dd-map-scheme-detail" hidden aria-live="polite">
                        <div class="dd-map-scheme-detail__toolbar">
                            <span class="dd-map-scheme-detail__hint" id="dd-map-scheme-detail-hint">Scheme details</span>
                            <button type="button" class="dd-map-scheme-detail__close" id="dd-map-scheme-detail-close" aria-label="Close scheme details">
                                <i class="fas fa-times" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="dd-map-scheme-detail__body" id="dd-map-scheme-detail-body"></div>
                    </div>
                    <p class="dd-map-scheme-detail__placeholder" id="dd-map-scheme-detail-placeholder">
                        <i class="fas fa-hand-pointer" aria-hidden="true"></i> Click a hotspot on the map to view full scheme risk details.
                    </p>
                </div>
                <a class="dd-attention-card dd-attention-card--link" href="{{ route('dashboard.portfolio-intelligence') }}?section=districts" data-section="districts">
                    <div class="dd-attention-card__head">
                        <h3 class="dd-attention-card__title"><i class="fas fa-map-pin"></i> District hotspots</h3>
                        <span class="dd-attention-card__open"><i class="fas fa-external-link-alt"></i></span>
                    </div>
                    <div class="dd-attention-chart-wrap dd-attention-chart-wrap--bars">
                        <canvas id="dd-attention-chart-districts" height="260" aria-label="District attention counts"></canvas>
                    </div>
                    <div class="dd-attention-location-table-wrap dd-attention-location-table-wrap--compact">
                        <table class="dd-attention-table dd-attention-table--compact">
                            <thead>
                                <tr>
                                    <th>District</th>
                                    <th>Critical</th>
                                    <th>Warning</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody id="dd-attention-location-body"></tbody>
                        </table>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

{{-- KPI drill-down: full-screen modal report with searchable columns --}}
<div class="modal fade dd-kpi-modal" id="dd-kpi-modal" tabindex="-1" role="dialog" aria-labelledby="dd-kpi-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable dd-kpi-modal__dialog" role="document">
        <div class="modal-content dd-kpi-modal__content">
            <div class="modal-header dd-kpi-modal__header">
                <div class="dd-kpi-modal__header-text">
                    <div class="dd-kpi-modal__header-icon" id="dd-kpi-modal-icon" aria-hidden="true"><i class="fas fa-chart-bar"></i></div>
                    <div>
                        <h5 class="modal-title dd-kpi-modal__title" id="dd-kpi-modal-title">Scheme report</h5>
                        <p class="dd-kpi-modal__explain" id="dd-kpi-modal-explain"></p>
                    </div>
                </div>
                <button type="button" class="close dd-kpi-modal__close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body dd-kpi-modal__body">
                <div class="dd-kpi-modal__summary" id="dd-kpi-modal-summary" hidden></div>
                <div class="dd-kpi-modal__table-panel" id="dd-kpi-modal-table-panel">
                    <div class="dd-kpi-modal__toolbar">
                        <label class="dd-kpi-modal__search-global">
                            <i class="fas fa-search" aria-hidden="true"></i>
                            <input type="search" id="dd-kpi-search-global" class="form-control form-control-sm" placeholder="Search scheme, ADP #, UID, district, issues…" autocomplete="off">
                        </label>
                        <span class="dd-kpi-modal__count" id="dd-kpi-modal-count"></span>
                    </div>
                    <div class="dd-kpi-modal__table-wrap">
                        <table class="dd-kpi-modal__table">
                            <thead>
                                <tr class="dd-kpi-modal__head-row">
                                    <th scope="col" class="dd-kpi-modal__th-sev"></th>
                                    <th scope="col">Scheme</th>
                                    <th scope="col" class="dd-kpi-modal__th-id">ADP #</th>
                                    <th scope="col" class="dd-kpi-modal__th-id">UID</th>
                                    <th scope="col">District</th>
                                    <th scope="col">Sector</th>
                                    <th scope="col">Schedule</th>
                                    <th scope="col" class="dd-kpi-modal__th-stats">Financial &amp; progress</th>
                                    <th scope="col">Issues &amp; reasons</th>
                                </tr>
                                <tr class="dd-kpi-modal__filter-row">
                                    <th></th>
                                    <th><input type="search" class="form-control form-control-sm dd-kpi-col-search" data-kpi-col="scheme" placeholder="Filter…" autocomplete="off"></th>
                                    <th><input type="search" class="form-control form-control-sm dd-kpi-col-search" data-kpi-col="adp" placeholder="Filter…" autocomplete="off"></th>
                                    <th><input type="search" class="form-control form-control-sm dd-kpi-col-search" data-kpi-col="uid" placeholder="Filter…" autocomplete="off"></th>
                                    <th><input type="search" class="form-control form-control-sm dd-kpi-col-search" data-kpi-col="district" placeholder="Filter…" autocomplete="off"></th>
                                    <th><input type="search" class="form-control form-control-sm dd-kpi-col-search" data-kpi-col="sector" placeholder="Filter…" autocomplete="off"></th>
                                    <th><input type="search" class="form-control form-control-sm dd-kpi-col-search" data-kpi-col="schedule" placeholder="Filter…" autocomplete="off"></th>
                                    <th>
                                        <input type="search" class="form-control form-control-sm dd-kpi-col-search mb-1" data-kpi-col="financial" placeholder="Cost, alloc, exp…" autocomplete="off">
                                        <input type="search" class="form-control form-control-sm dd-kpi-col-search" data-kpi-col="stats" placeholder="PP, FP, gap…" autocomplete="off">
                                    </th>
                                    <th><input type="search" class="form-control form-control-sm dd-kpi-col-search" data-kpi-col="issues" placeholder="Filter…" autocomplete="off"></th>
                                </tr>
                            </thead>
                            <tbody id="dd-kpi-modal-tbody"></tbody>
                        </table>
                    </div>
                    <div class="dd-kpi-modal__empty" id="dd-kpi-modal-empty" hidden>No schemes match your search.</div>
                </div>
            </div>
            <div class="modal-footer dd-kpi-modal__footer">
                <div class="dd-kpi-modal__pager" id="dd-kpi-modal-pager"></div>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>