@php
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? 'Email Metrics',
        $subTitle ?? 'Email Metrics',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    );
@endphp
@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="row">
    <div class="col-md-2">
        <div class="project-box bg-primary text-center p-3 mb-3">
            <h4 class="text-white mb-1">{{ number_format($total) }}</h4>
            <p class="text-white mb-0 small">Total Sent</p>
        </div>
    </div>
    <div class="col-md-2">
        <div class="project-box bg-success text-center p-3 mb-3">
            <h4 class="text-white mb-1">{{ number_format($delivered) }}</h4>
            <p class="text-white mb-0 small">Delivered</p>
        </div>
    </div>
    <div class="col-md-2">
        <div class="project-box bg-info text-center p-3 mb-3">
            <h4 class="text-white mb-1">{{ $openRate }}%</h4>
            <p class="text-white mb-0 small">Open Rate</p>
        </div>
    </div>
    <div class="col-md-2">
        <div class="project-box bg-info text-center p-3 mb-3">
            <h4 class="text-white mb-1">{{ $clickRate }}%</h4>
            <p class="text-white mb-0 small">Click Rate</p>
        </div>
    </div>
    <div class="col-md-2">
        <div class="project-box bg-warning text-center p-3 mb-3">
            <h4 class="text-white mb-1">{{ $bounceRate }}%</h4>
            <p class="text-white mb-0 small">Bounce Rate</p>
        </div>
    </div>
    <div class="col-md-2">
        <div class="project-box bg-danger text-center p-3 mb-3">
            <h4 class="text-white mb-1">{{ $unsubscribeRate }}%</h4>
            <p class="text-white mb-0 small">Unsubscribe Rate</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8 mb-4">
        <div class="card">
            <div class="card-header"><strong>Sends Per Day (Last 30 Days)</strong></div>
            <div class="card-body">
                <canvas id="sendsChart" height="100"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-4">
        <div class="card">
            <div class="card-header"><strong>Bounce Breakdown</strong></div>
            <div class="card-body">
                <canvas id="bounceChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header"><strong>Performance by Template</strong></div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>Template</th>
                    <th class="text-center">Sent</th>
                    <th class="text-center">Open Rate</th>
                    <th class="text-center">Click Rate</th>
                    <th class="text-center">Bounce Rate</th>
                </tr>
            </thead>
            <tbody>
                @forelse($templatePerformance as $row)
                <tr>
                    <td>{{ $row->template_name }}</td>
                    <td class="text-center">{{ number_format($row->sent) }}</td>
                    <td class="text-center">{{ $row->open_rate }}%</td>
                    <td class="text-center">{{ $row->click_rate }}%</td>
                    <td class="text-center">{{ $row->bounce_rate }}%</td>
                </tr>
                @empty
                <tr><td colspan="5" class="text-center text-muted py-4">No data yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script>
(function () {
    var sendsData = @json($sendsPerDay);
    var bounceData = @json($bounceTrend);

    // Sends chart
    new Chart(document.getElementById('sendsChart'), {
        type: 'line',
        data: {
            labels: sendsData.map(r => r.date),
            datasets: [{
                label: 'Sent',
                data: sendsData.map(r => r.count),
                borderColor: '#4e73df',
                backgroundColor: 'rgba(78,115,223,0.1)',
                fill: true,
                tension: 0.3
            }]
        },
        options: { responsive: true, plugins: { legend: { display: false } } }
    });

    // Bounce chart
    var hardDates = {}, softDates = {};
    bounceData.forEach(function(r) {
        if (r.bounce_type === 'hard') hardDates[r.date] = r.count;
        else softDates[r.date] = r.count;
    });
    var allDates = [...new Set(bounceData.map(r => r.date))].sort();

    new Chart(document.getElementById('bounceChart'), {
        type: 'bar',
        data: {
            labels: allDates,
            datasets: [
                { label: 'Hard', data: allDates.map(d => hardDates[d] || 0), backgroundColor: '#e74a3b' },
                { label: 'Soft', data: allDates.map(d => softDates[d] || 0), backgroundColor: '#f6c23e' }
            ]
        },
        options: { responsive: true, scales: { x: { stacked: true }, y: { stacked: true } } }
    });
})();
</script>
@endpush