@if (Auth::user()->can('hc_dash.view') && isset($labelsChart))
<div class="chm-section">
    <div class="chm-section-title"><i class="fa-solid fa-chart-line"></i> Financial Trend</div>
    <div class="chm-widget-card chart-header-accent">
        <div class="card-header">
            <i class="fa-solid fa-chart-area"></i> {{ $financialChartTitle ?? 'Monthly Revenue vs. Expenses' }}
            @if(!empty($financialChartSubtitle))
                <div class="small text-muted fw-normal mt-1">{{ $financialChartSubtitle }}</div>
            @endif
        </div>
        <div class="card-body">
            @if(empty($financialChartHasData))
                <div class="text-center text-muted py-5">
                    <i class="fa-solid fa-chart-column fa-2x mb-2 opacity-50"></i>
                    <p class="mb-0">No posted income or expense activity in this period yet.</p>
                </div>
            @else
            <div class="chm-chart-canvas">
                <canvas id="revExpChart"></canvas>
            </div>
            @endif
        </div>
    </div>
</div>
@endif

@if (Auth::user()->can('sponsorship_per_cluster.view') && isset($clusterNames))
<div class="chm-section">
    <div class="chm-section-title"><i class="fa-solid fa-chart-bar"></i> CFDP Overview</div>
    <div class="row g-3">
        <div class="@can('country_specifics.view') col-12 col-lg-8 @else col-12 @endcan">
            <div class="chm-widget-card">
                <div class="card-header">
                    <i class="fa-solid fa-map-location-dot"></i> Active Sponsorships by Cluster
                </div>
                <div class="card-body">
                    <div class="chm-chart-canvas">
                        <canvas id="sponsorshipChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        @can('country_specifics.view')
        @if(isset($countries) && count($countries))
        <div class="col-12 col-lg-4">
            <div class="chm-widget-card h-100">
                <div class="card-header">
                    <i class="fa-solid fa-globe"></i> By Sponsor Country
                </div>
                <div class="card-body">
                    <div class="chm-chart-canvas-pie">
                        <canvas id="sponsorshipPieChart"></canvas>
                    </div>
                </div>
                <ul class="list-group list-group-flush chm-country-list">
                    @foreach($countries as $index => $country)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {{ $country }}
                            <span class="badge rounded-pill bg-primary">{{ $childCounts[$index] ?? 0 }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        @endif
        @endcan
    </div>
</div>
@endif

@if (Auth::user()->can('children_sponsorship_trend.view') || Auth::user()->can('children_graduation_trend.view'))
<div class="chm-section">
    <div class="chm-section-title"><i class="fa-solid fa-arrow-trend-up"></i> CFDP Trends</div>
    <div class="row g-3">
        @if (Auth::user()->can('children_sponsorship_trend.view'))
        <div class="col-12 @if(Auth::user()->can('children_graduation_trend.view')) col-xl-6 @endif">
            <div class="chm-widget-card h-100">
                <div class="card-header">
                    <i class="fa-solid fa-hand-holding-heart"></i> New Sponsorships Over Time
                </div>
                <div class="card-body">
                    <div class="chm-chart-canvas-sm">
                        <canvas id="newSponsorshipChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        @endif
        @if (Auth::user()->can('children_graduation_trend.view'))
        <div class="col-12 @if(Auth::user()->can('children_sponsorship_trend.view')) col-xl-6 @endif">
            <div class="chm-widget-card h-100">
                <div class="card-header">
                    <i class="fa-solid fa-graduation-cap"></i> Graduations Over Time
                </div>
                <div class="card-body">
                    <div class="chm-chart-canvas-sm">
                        <canvas id="graduationTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endif

@if (Auth::user()->can('farmers_registration_trend.view') && isset($farmersData))
<div class="chm-section">
    <div class="chm-section-title"><i class="fa-solid fa-seedling"></i> Transformation Trend</div>
    <div class="chm-widget-card chart-header-accent">
        <div class="card-header">
            <i class="fa-solid fa-user-plus"></i> Farmer Registrations Over Time
        </div>
        <div class="card-body">
            <div class="chm-chart-canvas">
                <canvas id="farmersTrendChart"></canvas>
            </div>
        </div>
    </div>
</div>
@endif