@php
    /** @var \App\Models\ResourceDistribution $resource_distribution */
    /** @var \App\Http\Charts\DistributionRacesChart $races_chart */
    /** @var \App\Http\Charts\DistributionDiaperSizesChart $diaper_sizes_chart */
    /** @var \App\Http\Charts\DistributionChildrenAgesChart $children_ages_chart */
    /** @var \App\Http\Charts\DistributionCountriesChart $countries_chart */
@endphp
<section class="mb-3">
    <h3>
        <time>{{ date('F d, Y', strtotime($resource_distribution->date)) }}</time>
        @can('export distributions')
            <a class="btn btn-primary btn-sm float-right d-none d-md-block" target="_blank"
               href="{{ route('distribution.export', ['id' => $resource_distribution->id, 'format' => 'excel']) }}">
                Export as Excel</a>
        @endcan
    </h3>
</section>

<section class="row mb-3">
    <div class="col-md-6 col-lg-4 mb-3">
        <div class="card counter text-primary">
            <i class="fa fa-user-friends mr-3" aria-hidden="true"></i>
            <div>
                <h4>
                    Family served
                    <strong>{{ $resource_distribution->checkin_records_count }}</strong>
                </h4>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-4 mb-3">
        <div class="card counter text-success">
            <i class="fa fa-users mr-3" aria-hidden="true"></i>
            <div>
                <h4>
                    Family member served
                    <strong>{{ $resource_distribution->member_checkin_records_count }}</strong>
                </h4>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-3">
        <div class="card counter text-info">
            <i class="fa fa-band-aid mr-3" aria-hidden="true"></i>
            <div>
                <h4>
                    Diaper given
                    <strong>{{ $resource_distribution->diapers_count }}</strong>
                </h4>
            </div>
        </div>
    </div>

</section>
<section class="row">
    <div class="col-md-6 mb-3">
        <div class="card">
            <h4 class="card-header">Diaper sizes</h4>
            <div class="card-body">
                {!! $diaper_sizes_chart->container() !!}
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-3">
        <div class="card">
            <h4 class="card-header">Children's age</h4>
            <div class="card-body">
                {!! $children_ages_chart->container() !!}
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-3">
        <div class="card">
            <h4 class="card-header">Races</h4>
            <div class="card-body">
                {!! $races_chart->container() !!}
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-3">
        <div class="card">
            <h4 class="card-header">Top 15 Countries</h4>
            <div class="card-body">
                {!! $countries_chart->container() !!}
            </div>
        </div>
    </div>
</section>