@php
    use App\Library\Tool;use App\Support\PublicUidFormatter;

    $aggregate = $presentation['aggregate'];
    $statusTiles = $presentation['status_tiles'];
    $chart = $presentation['chart'];
@endphp

<div class="drip-overview-hero card border-0 shadow-sm mb-2">
    <div class="card-body p-2">
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-1">
            <div class="drip-overview-hero__main">
                <p class="drip-overview-hero__eyebrow mb-50">{{ __('locale.menu.Drip Campaigns') }}</p>
                <h3 class="drip-overview-hero__title mb-50">{{ $dripCampaign->campaign_name }}</h3>
                <div class="d-flex flex-wrap align-items-center gap-50">
                    {!! PublicUidFormatter::badge($dripCampaign->uid) !!}
                    {!! $dripCampaign->getStatusBadge() !!}
                    <span class="badge bg-light-secondary text-uppercase">{{ $dripCampaign->sms_type }}</span>
                </div>
            </div>
            <div class="dropdown">
                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    {{ __('locale.labels.actions') }}
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item" href="{{ route('customer.drip_campaigns.edit', $dripCampaign->uid) }}">
                        <i data-feather="edit-2" class="font-small-3 me-50"></i>{{ __('locale.buttons.edit') }}
                    </a>
                    <a class="dropdown-item"
                       href="{{ route('customer.drip_campaigns.duplicate', $dripCampaign->uid) }}">
                        <i data-feather="copy"
                           class="font-small-3 me-50"></i>{{ __('locale.drip_campaigns.duplicate') }}
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item drip-action" data-action="pause" href="#">
                        <i data-feather="pause" class="font-small-3 me-50"></i>{{ __('locale.labels.pause') }}
                    </a>
                    <a class="dropdown-item drip-action" data-action="resume" href="#">
                        <i data-feather="play" class="font-small-3 me-50"></i>{{ __('locale.labels.resume') }}
                    </a>
                    <a class="dropdown-item drip-action text-danger" data-action="stop" href="#">
                        <i data-feather="stop-circle" class="font-small-3 me-50"></i>{{ __('locale.labels.stop') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row match-height g-1">
    <div class="col-lg-4 col-md-6 col-12">
        <div class="card analytics-stat-card h-100 border-0 shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center border-0 pb-1">
                <div>
                    <h2 class="fw-bolder mb-0 analytics-stat-card__value">{{ number_format($aggregate['total_sent']) }}</h2>
                    <p class="card-text analytics-stat-card__label mb-0">{{ __('locale.drip_campaigns.sent') }}</p>
                </div>
                <div class="avatar bg-light-primary p-50 m-0">
                    <div class="avatar-content"><i data-feather="send" class="font-medium-5"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-12">
        <div class="card analytics-stat-card h-100 border-0 shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center border-0 pb-0">
                <div>
                    <h2 class="fw-bolder mb-0 analytics-stat-card__value text-success">{{ number_format($aggregate['delivery_percentage'], 1) }}
                        %</h2>
                    <p class="card-text analytics-stat-card__label mb-0">{{ __('locale.drip_campaigns.delivered') }}
                        %</p>
                </div>
                <div class="avatar bg-light-success p-50 m-0">
                    <div class="avatar-content"><i data-feather="trending-up" class="font-medium-5"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-12">
        <div class="card analytics-stat-card h-100 border-0 shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center border-0 pb-0">
                <div>
                    <h2 class="fw-bolder mb-0 analytics-stat-card__value">{{ $aggregate['total_cost_formatted'] }}</h2>
                    <p class="card-text analytics-stat-card__label mb-0">{{ __('locale.labels.cost') }}</p>
                </div>
                <div class="avatar bg-light-warning p-50 m-0">
                    <div class="avatar-content"><i data-feather="dollar-sign" class="font-medium-5"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row match-height g-1 mt-0">
    @foreach($statusTiles as $tile)
        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card h-100 border-0 shadow-sm drip-overview-tile drip-overview-tile--{{ $tile['key'] }}">
                <div class="card-header d-flex justify-content-between align-items-center py-1">
                    <div>
                        <h2 class="fw-bolder mb-0">{{ number_format($tile['count']) }}</h2>
                        <p class="card-text mb-0">{{ $tile['label'] }}</p>
                    </div>
                    <div class="avatar bg-light-{{ $tile['color'] }} p-50 m-0">
                        <div class="avatar-content">
                            <i data-feather="{{ $tile['icon'] }}" class="font-medium-5"></i>
                        </div>
                    </div>
                </div>
                <div class="card-body pt-0 pb-1">
                    <div class="progress" style="height: 5px;">
                        <div class="progress-bar bg-{{ $tile['color'] }}"
                             style="width: {{ min($tile['pct'], 100) }}%;"></div>
                    </div>
                    <small class="text-muted">{{ number_format($tile['pct'], 1) }}%</small>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row match-height g-1 mt-0">
    <div class="col-xl-8 col-12">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-50 border-bottom">
                <h4 class="card-title mb-0">{{ __('locale.drip_campaigns.sequence_performance') }}</h4>
                <small class="text-muted">{{ $aggregate['messages_count'] }} {{ __('locale.drip_campaigns.messages') }}</small>
            </div>
            <div class="card-body p-0">
                @forelse($sequence as $row)
                    <div class="drip-sequence-row px-2 py-1 border-bottom">
                        <div class="d-flex flex-wrap justify-content-between align-items-start gap-50 mb-50">
                            <div>
                                <span class="badge bg-light-primary me-50">#{{ $row['sequence'] }}</span>
                                <span class="fw-semibold">{{ $row['label'] }}</span>
                                @if(! empty($row['preview']))
                                    <p class="text-muted font-small-3 mb-0 mt-25">{{ $row['preview'] }}</p>
                                @endif
                            </div>
                            <span class="badge bg-light-success">{{ number_format($row['delivery_rate'], 1) }}% {{ __('locale.labels.delivered') }}</span>
                        </div>
                        <div class="d-flex flex-wrap gap-2 font-small-3 text-muted mb-50">
                            <span>{{ __('locale.drip_campaigns.sent') }}: <strong
                                        class="text-body">{{ $row['sent'] }}</strong></span>
                            <span>{{ __('locale.drip_campaigns.delivered') }}: <strong
                                        class="text-success">{{ $row['delivered'] }}</strong></span>
                            <span>{{ __('locale.drip_campaigns.failed') }}: <strong
                                        class="text-danger">{{ $row['failed'] }}</strong></span>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-success"
                                 style="width: {{ $row['sent'] > 0 ? ($row['delivered'] / $row['sent'] * 100) : 0 }}%;"></div>
                            <div class="progress-bar bg-danger"
                                 style="width: {{ $row['sent'] > 0 ? ($row['failed'] / $row['sent'] * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center py-2 mb-0">{{ __('locale.datatables.no_results') }}</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-12">
        <div class="row g-1 h-100">
            <div class="col-12">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header border-bottom pb-1">
                        <h4 class="card-title mb-0">{{ __('locale.labels.reports_ratio') }}</h4>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <div id="drip-delivery-chart" class="flex-grow-1" style="min-height: 220px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header border-bottom pb-1">
                        <h4 class="card-title mb-0">{{ __('locale.menu.Overview') }}</h4>
                    </div>
                    <div class="card-body font-small-4">
                        <div class="drip-overview-meta-row">
                            <span class="text-muted">{{ __('locale.drip_campaigns.enrollments') }}</span>
                            <strong>{{ number_format($aggregate['enrollments']) }}</strong>
                        </div>
                        <div class="drip-overview-meta-row">
                            <span class="text-muted">{{ __('locale.drip_campaigns.active_sequences') }}</span>
                            <strong>{{ number_format($aggregate['active_enrollments']) }}</strong>
                        </div>
                        <div class="drip-overview-meta-row">
                            <span class="text-muted">{{ __('locale.labels.sms_count') }}</span>
                            <strong>{{ number_format($aggregate['sms_parts']) }}</strong>
                        </div>
                        <div class="drip-overview-meta-row">
                            <span class="text-muted">{{ __('locale.labels.cost') }} / SMS</span>
                            <strong>{{ $aggregate['cost_per_sms_formatted'] }}</strong>
                        </div>
                        <div class="drip-overview-meta-row">
                            <span class="text-muted">{{ __('locale.drip_campaigns.trigger') }}</span>
                            <strong class="text-capitalize">{{ str_replace('_', ' ', $dripCampaign->trigger_type) }}</strong>
                        </div>
                        @if($dripCampaign->start_at)
                            <div class="drip-overview-meta-row">
                                <span class="text-muted">{{ __('locale.drip_campaigns.start_date') }}</span>
                                <strong>{{ Tool::customerDateTime($dripCampaign->start_at) }}</strong>
                            </div>
                        @endif
                        @if($dripCampaign->contactGroups->isNotEmpty())
                            <hr class="my-1">
                            <p class="text-muted mb-50">{{ __('locale.contacts.contact_groups') }}</p>
                            <div class="d-flex flex-wrap gap-50">
                                @foreach($dripCampaign->contactGroups as $group)
                                    <a href="{{ route('customer.contacts.show', $group->uid) }}"
                                       class="btn btn-sm btn-outline-primary" target="_blank"
                                       rel="noopener">{{ $group->name }}</a>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="drip-sequence-chart" class="d-none" data-labels='@json(collect($sequence)->pluck("label"))'
     data-sent='@json(collect($sequence)->pluck("sent"))'
     data-delivered='@json(collect($sequence)->pluck("delivered"))'></div>