@extends('layouts.app')

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
    function number_format(number, decimals, dec_point, thousands_sep) {
        // Strip all characters but numerical ones.
        number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
        var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function(n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
            };
        // Fix for IE parseFloat(0.55).toFixed(0) = 0;
        s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
        if (s[0].length > 3) {
            s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
        }
        if ((s[1] || '').length < prec) {
            s[1] = s[1] || '';
            s[1] += new Array(prec - s[1].length + 1).join('0');
        }
        return s.join(dec);
    }

    document.addEventListener("DOMContentLoaded", function() {
        const keywordMatchTypeChart = document.getElementById('keyword_match_type_chart');
        const keywordMatchTypeData = JSON.parse(keywordMatchTypeChart.dataset.keywords)
        const currency = keywordMatchTypeChart.dataset.currency

        new Chart(keywordMatchTypeChart, {
            type: 'bar',
            data: {
                labels: keywordMatchTypeData.map(item => item.keyword_match_type + ' Match'),
                datasets: [{
                    type: 'line',
                    label: 'Cost per Conversion',
                    data: keywordMatchTypeData.map(item => item.cost_per_conversion),
                    borderWidth: 2,
                    yAxisID: 'y1',
                    borderColor: '#003554',
                    backgroundColor: '#003554'
                }, {
                    label: 'Spend',
                    data: keywordMatchTypeData.map(item => item.cost),
                    borderWidth: 1,
                    yAxisID: 'y',
                    borderColor: '#00a6fb',
                    backgroundColor: '#00a6fb'
                }]
            },
            options: {
                responsive: true,
                stacked: false,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: false
                    },
                    legend: {
                        display: true,
                        position: 'bottom',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }

                                if (context.parsed.y !== null) {
                                    // label += new Intl.NumberFormat('en-US', {
                                    //     style: 'currency',
                                    //     currency: 'GBP'
                                    // }).format(context.parsed.y);
                                    label += currency + number_format(context.parsed.y, 2)
                                }

                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        ticks: {
                            callback: function(value, index, ticks) {
                                return currency + number_format(value, 2);
                            }
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        ticks: {
                            callback: function(value, index, ticks) {
                                return currency + number_format(value, 2);
                            }
                        },
                        grid: {
                            drawOnChartArea: false,
                        },
                    },
                }
            }
        });

        const ctx = document.getElementById('myChart');
        const data = JSON.parse(ctx.dataset.values)

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [''],
                datasets: [{
                        label: 'No Conversions',
                        data: [data.no_conversions],
                        borderWidth: 1,
                        borderColor: '#003554',
                        backgroundColor: '#003554'
                    },
                    {
                        label: 'High Cost to Conversions',
                        data: [data.high_cost_to_conversions],
                        borderWidth: 1,
                        borderColor: '#006494',
                        backgroundColor: '#006494'
                    },
                    {
                        label: 'Converting Keyword Spend',
                        data: [data.converting_keyword_spend],
                        borderWidth: 1,
                        borderColor: '#00a6fb',
                        backgroundColor: '#00a6fb'
                    }
                ]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: false
                    },
                    legend: {
                        display: true,
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }

                                if (context.parsed.x !== null) {
                                    label += currency + number_format(context.parsed.x, 2)
                                }

                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        stacked: true,
                    },
                    x: {
                        type: 'linear',
                        stacked: true,
                        display: true,
                        position: 'left',
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function(value, index, ticks) {
                                return currency + number_format(value, 2);
                            }
                        }
                    }
                }
            }
        });

        const cost_per_conversion_chart = document.getElementById('cost_per_conversion_chart');
        const cost_per_conversion_data = JSON.parse(cost_per_conversion_chart.dataset.values)

        new Chart(cost_per_conversion_chart, {
            type: 'bar',
            data: {
                labels: [
                    cost_per_conversion_data.first_keyword + ' Match',
                    cost_per_conversion_data.last_keyword + ' Match'
                ],
                datasets: [{
                    label: 'Cost per Conversion',
                    data: [
                        cost_per_conversion_data.first_keyword_value,
                        cost_per_conversion_data.last_keyword_value
                    ],
                    borderWidth: 2,
                    yAxisID: 'y',
                    borderColor: '#003554',
                    backgroundColor: '#003554'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                stacked: false,
                plugins: {
                    title: {
                        display: false
                    },
                    legend: {
                        display: true,
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }

                                if (context.parsed.x !== null) {
                                    label += currency + number_format(context.parsed.y, 2)
                                }

                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        ticks: {
                            callback: function(value, index, ticks) {
                                return currency + number_format(value, 2);
                            }
                        }
                    }
                }
            }
        });

        const top_bottom_conversion_chart = document.getElementById('top_bottom_conversion_chart');
        if (top_bottom_conversion_chart) {
            const top_bottom_conversion_data = JSON.parse(top_bottom_conversion_chart.dataset.values)

            new Chart(top_bottom_conversion_chart, {
                type: 'bar',
                data: {
                    labels: [
                        top_bottom_conversion_data.top_keyword,
                        top_bottom_conversion_data.bottom_keyword
                    ],
                    datasets: [{
                        label: 'Cost per Conversion',
                        data: [
                            top_bottom_conversion_data.top_keyword_value,
                            top_bottom_conversion_data.bottom_keyword_value
                        ],
                        borderWidth: 2,
                        yAxisID: 'y',
                        borderColor: '#003554',
                        backgroundColor: '#003554'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    stacked: false,
                    plugins: {
                        title: {
                            display: false
                        },
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }

                                    if (context.parsed.x !== null) {
                                        label += currency + number_format(context.parsed.y, 2)
                                    }

                                    return label;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            ticks: {
                                callback: function(value, index, ticks) {
                                    return currency + number_format(value, 2);
                                }
                            }
                        }
                    }
                }
            });
        }

        const cro_chart = document.getElementById('cro_chart');
        const cro_chart_data = JSON.parse(cro_chart.dataset.values)

        new Chart(cro_chart, {
            type: 'bar',
            data: {
                labels: [''],
                datasets: [{
                        label: 'Current',
                        data: [cro_chart_data.current],
                        borderWidth: 1,
                        borderColor: '#003554',
                        backgroundColor: '#003554'
                    },
                    {
                        label: '20% CRO',
                        data: [cro_chart_data.cro],
                        borderWidth: 1,
                        borderColor: '#006494',
                        backgroundColor: '#006494'
                    }
                ]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: false
                    },
                    legend: {
                        display: true,
                        position: 'bottom'
                    }
                },
                scales: {
                    y: {
                        stacked: true,
                    },
                    x: {
                        type: 'linear',
                        stacked: true,
                        display: true,
                        position: 'left'
                    }
                }
            }
        });
    })
</script>
@endpush

@section('content')
<header class="navbar sticky-top bg-white flex-nowrap border-bottom px-3">
    <a class="navbar-brand col-md-3 col-lg-2 d-flex flex-column align-items-end fs-6 text-white" href="#">
        <img src="{{ asset('images/AuditMyAds.png') }}" alt="audit my ads" />
        <img src="{{ asset('images/clutch-logo.png') }}" alt="clutch" />
    </a>
</header>

<div class="container-fluid">
    <div class="row">
        <main class="col-12 px-md-4 py-5">
            <div class="d-grid gap-2">
                <div class="fs-5">
                    <span class="fw-bold">Campaign Type:</span>
                    <span>Search Partners</span>
                </div>
                <div class="fs-5">
                    <span class="fw-bold">Date Range:</span>
                    <span>{{ $report->start_date }} / {{ $report->end_date }}</span>
                </div>
                <div class="fs-5">
                    <span class="fw-bold">Google Ads ID:</span>
                    <span>{{ $report->customer->getMaskingCustomerId() }}</span>
                </div>
                <div class="fs-5">
                    <span class="fw-bold">Account Name:</span>
                    <span>{{ $report->customer->name }}</span>
                </div>
            </div>

            <div class="pb-4 mt-4 border-top"></div>

            <div id="aggregate-stats" class="scroll-m-120">
                <h3>Aggregate Stats</h3>
                <p>All Keywords accross all Search Campaigns</p>

                <div class="mt-4 d-grid gap-1">
                    <div>
                        <span class="fw-bold">Total Spend:</span>
                        <span>{{ $report->currency_code }}@money($report->campaigns->getTotalSpend(), 0)</span>
                    </div>
                    <div>
                        <span class="fw-bold">Total #Conversions:</span>
                        <span>{{ number_format($report->campaigns->getTotalConversions(), 0) }}</span>
                    </div>
                    <div>
                        <span class="fw-bold"># Active Keywords:</span>
                        <span>{{ $report->aggregateStats->keyword_count }}</span>
                    </div>
                    <div>
                        <span class="fw-bold"># Active Keywords with spend of at least {{ $report->currency_code }}1 spend:</span>
                        <span>{{ $report->aggregateStats->keywords_greater_1_spend }}</span>
                    </div>
                    <div>
                        <span class="fw-bold"># Active Keywords with 1 or more conversions:</span>
                        <span>{{ $report->aggregateStats->keywords_with_conversions }}</span>
                    </div>
                    <div>
                        <span class="fw-bold"># Active Keywords with 0 conversions:</span>
                        <span>{{ $report->aggregateStats->keywords_0_conversions }}</span>
                    </div>
                    <div>
                        <span class="fw-bold">Average cost per conversion:</span>
                        <span>{{ $report->currency_code }}@money($report->campaigns->getAverageCostPerConversion())</span>
                    </div>
                    <div>
                        <span class="fw-bold">Average conversion rate:</span>
                        <span>@percent($report->campaigns->getAverageConversionRate())</span>
                    </div>
                    <div>
                        <span class="fw-bold">Average CTR:</span>
                        <span>@percent($report->campaigns->getAverageCtr())</span>
                    </div>
                </div>
            </div>

            <div class="pb-4 mt-4 border-top"></div>

            <div id="keyword-findings" class="scroll-m-120">
                <h3>Keyword Findings</h3>

                <div class="mt-4">
                    <div id="wasted-spend" class="scroll-m-120">
                        <h4>Findings on Inneffective Spend</h4>
                    </div>

                    <div class="mt-4">
                        <p>
                            <strong>{{ $report->currency_code }}@money($report->keywordsWithNoConversions->no_conversions, 0)</strong> (@number($report->keywordsWithNoConversions->percent_of_total_spend, 0)% of total spend) was spent on Keywords that resulted in NO conversions.
                        </p>

                        <div class="modal fade" id="keywordsWithNoConversions" tabindex="-1" aria-labelledby="keywordsWithNoConversionsLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-body p-0">
                                        <table class="table">
                                            <thead class="sticky-top">
                                                <tr>
                                                    <th scope="col">Keyword Text</th>
                                                    <th scope="col">Cost</th>
                                                    <th scope="col">Conversions</th>
                                                    <th scope="col">Currency</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($report->keywordsWithNoConversions->keywords as $keyword)
                                                <tr>
                                                    <th>{{ $keyword->keyword_text }}</th>
                                                    <td>@number($keyword->cost)</td>
                                                    <td>{{ $keyword->conversions }}</td>
                                                    <td>{{ $keyword->currency_code }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <ul>
                            <li>
                                <strong>{{ $report->currency_code }}@money($report->topTenKeywordsWithNoConversions->cost, 0)</strong> of this was spent on <strong>10 keywords</strong> that have a decent volume of clicks, but are not getting any conversions.
                            </li>
                        </ul>

                        <div class="modal fade" id="topTenKeywordsWithNoConversions" tabindex="-1" aria-labelledby="topTenKeywordsWithNoConversionsLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-body p-0">
                                        <table class="table">
                                            <thead class="sticky-top">
                                                <tr>
                                                    <th scope="col">Keyword Text</th>
                                                    <th scope="col">Cost</th>
                                                    <th scope="col">Conversions</th>
                                                    <th scope="col">Currency</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($report->topTenKeywordsWithNoConversions->keywords as $keyword)
                                                <tr>
                                                    <th>{{ $keyword->keyword_text }}</th>
                                                    <td>@number($keyword->cost)</td>
                                                    <td>{{ $keyword->conversions }}</td>
                                                    <td>{{ $keyword->currency_code }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if ($report->keywordsWithCostAndImpressions->cost !== null)
                        <p>
                            Another <strong>{{ $report->currency_code }}@money($report->keywordsWithCostAndImpressions->cost, 0)</strong> (@number($report->keywordsWithCostAndImpressions->percent_of_total_spend, 0)% of total spend) was spent on {{ $report->keywordsWithCostAndImpressions->keyword_count }} keywords that drove @number($report->keywordsWithCostAndImpressions->conversions, 0) conversions, but at a {{ $report->currency_code }}@money($report->keywordsWithCostAndImpressions->cost_per_conversion) cost per conversion, which is 86% higher than your {{ $report->currency_code }}@money($report->keywordsWithNoConversions->av_cost_per_conversion) average cost per conversion. That's {{ $report->currency_code }}@money(round($report->keywordsWithCostAndImpressions->cost, 2) - ($report->keywordsWithCostAndImpressions->conversions * round($report->keywordsWithNoConversions->av_cost_per_conversion, 0)), 0) in extra spend.
                        </p>

                        <div class="modal fade" id="keywordsWithCostAndImpressions" tabindex="-1" aria-labelledby="keywordsWithCostAndImpressionsLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-body p-0">
                                        <table class="table">
                                            <thead class="sticky-top">
                                                <tr>
                                                    <th scope="col">Keyword Text</th>
                                                    <th scope="col">Cost</th>
                                                    <th scope="col">Conversions</th>
                                                    <th scope="col">Currency</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($report->keywordsWithCostAndImpressions->keywords as $keyword)
                                                <tr>
                                                    <th>{{ $keyword->keyword_text }}</th>
                                                    <td>@number($keyword->cost)</td>
                                                    <td>{{ $keyword->conversions }}</td>
                                                    <td>{{ $keyword->currency_code }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <ul>
                            <li>The # of clicks for these {{ $report->keywordsWithCostAndImpressions->keyword_count }} keywords ranges from @number($report->keywordsWithCostAndImpressions->min_clicks, 0) to @number($report->keywordsWithCostAndImpressions->max_clicks, 0), so these keyword don’t appear to be cost-effective or scalable.</li>
                        </ul>

                        <p>
                            Based on these findings alone, you could <strong>reallocate @percent($report->keywordsWithNoConversions->percent_of_total_spend + $report->keywordsWithCostAndImpressions->percent_of_total_spend, 0) of your ad spend to be more effective.</strong>
                        </p>
                        @endif
                    </div>

                    <div class="my-5 w-100" style="height: 250px">
                        <canvas id="myChart" data-currency="{{ $report->currency_code }}" data-values="{{ json_encode(['no_conversions' => round($report->keywordsWithNoConversions->no_conversions, 2), 'high_cost_to_conversions' => round($report->keywordsWithCostAndImpressions->cost, 2), 'converting_keyword_spend' => round($report->campaigns->getTotalSpend() - $report->keywordsWithNoConversions->no_conversions - $report->keywordsWithCostAndImpressions->cost, 2)]) }}"></canvas>
                    </div>
                </div>

                <div class="mt-4">
                    <div id="broad-vs-phrase-match" class="scroll-m-120">
                        <h4>Findings on Broad Match vs Phrase Match Keywords</h4>
                    </div>

                    <div class="mt-4">
                        <h5>Keyword Match Type Insights</h5>

                        <div class="mt-4">
                            @foreach ($report->keywordsMatchTypeInsights->keywords as $keywordMatchTypeInsight)
                            <div>
                                <p>{{ Str::title($keywordMatchTypeInsight->keyword_match_type) }} Match</p>
                                <ul>
                                    <li>Total Spend: {{ $report->currency_code }}@money($keywordMatchTypeInsight->cost, 0)</li>
                                    <li>Total Conversions: @number($keywordMatchTypeInsight->conversions, 0)</li>
                                    <li>Average Cost per Conversion: {{ $report->currency_code }}@money($keywordMatchTypeInsight->cost_per_conversion)</li>
                                </ul>
                            </div>
                            @endforeach

                            <div class="my-5 w-100" style="height: 300px;">
                                <canvas id="keyword_match_type_chart" data-currency="{{ $report->currency_code }}" data-keywords="{{ json_encode($report->keywordsMatchTypeInsights->keywords) }}"></canvas>
                            </div>

                            @if ($report->keywordsMatchTypeInsights->first->cost_per_conversion > 0 && $report->keywordsMatchTypeInsights->last->cost_per_conversion > 0)
                            <p>
                                Your {{ Str::title($report->keywordsMatchTypeInsights->first->keyword_match_type) }} Match keywords are getting you conversions for <strong>@percent($report->keywordsMatchTypeInsights->percent_per_conversion, 0) less cost per conversion</strong> than your {{ Str::title($report->keywordsMatchTypeInsights->last->keyword_match_type) }} Match keywords ({{ $report->currency_code }}@money($report->keywordsMatchTypeInsights->first->cost_per_conversion) vs. {{ $report->currency_code }}@money($report->keywordsMatchTypeInsights->last->cost_per_conversion))
                            </p>
                            @endif

                            @if($report->keywordsMatchTypeInsights->first->cost_per_conversion > 0 && $report->keywordsMatchTypeInsights->last->cost_per_conversion > 0)
                            <p>
                                If you reallocated your {{ $report->currency_code }}@money($report->keywordsMatchTypeInsights->last->cost, 0) spend from {{ Str::title($report->keywordsMatchTypeInsights->last->keyword_match_type) }} Match keywords to {{ Str::title($report->keywordsMatchTypeInsights->first->keyword_match_type) }} Match keywords, <strong>you could get {{ $report->keywordsMatchTypeInsights->reallocated_conversions }} more conversions</strong> (assuming cost per conversion holds steady).</p>
                            </p>
                            @else
                            <p>
                                If you reallocated your {{ $report->currency_code }}@money($report->campaigns->getTotalSpend() - $report->keywordsMatchTypeInsights->last->cost, 0) spend from to Broad Match keywords, you could get {{ $report->keywordsMatchTypeInsights->second_reallocated_conversions }} more conversions (assuming cost per conversion holds steady).
                            </p>
                            @endif
                        </div>
                    </div>

                    <div class="my-5 w-100" style="height: 250px">
                        <canvas id="cost_per_conversion_chart" data-currency="{{ $report->currency_code }}" data-values="{{ json_encode(['first_keyword' => Str::title($report->keywordsMatchTypeInsights->first->keyword_match_type), 'first_keyword_value' => $report->keywordsMatchTypeInsights->first->cost_per_conversion, 'last_keyword' => Str::title($report->keywordsMatchTypeInsights->last->keyword_match_type), 'last_keyword_value' => $report->keywordsMatchTypeInsights->last->cost_per_conversion]) }}"></canvas>
                    </div>
                </div>

                @if ($report->costOfConversions->top->cost_per_conversion > 0 && $report->costOfConversions->bottom->cost_per_conversion > 0)
                <div class="mt-4">
                    <div id="top-bottom-conversions" class="scroll-m-120">
                        <h4>Findings on Top 25% vs Bottom 25%: Cost of Conversions</h4>
                    </div>

                    <div class="mt-4">
                        <ul>
                            <li class="pb-4">
                                <strong>Top 25% Keywords by Cost per Conversion:</strong> {{ $report->costOfConversions->top->keyword_count }} keywords accounted for @percent($report->costOfConversions->top_conversion_summary_percentage, 0) of all conversions ({{ number_format($report->costOfConversions->top->conversions, 0) }} out of {{ number_format($report->costOfConversions->summary->conversions, 0) }}). You spent {{ $report->currency_code }}@money($report->costOfConversions->top->cost, 0) on acquiring these {{ number_format($report->costOfConversions->top->conversions, 0) }} conversions.

                                <ul class="pt-2">
                                    <li class="py-1">
                                        {{ $report->currency_code }}@money($report->costOfConversions->top->cost_per_conversion) cost per conversion, @percent($report->costOfConversions->top->percent_cost_per_conversion, 0) less costly than your {{ $report->currency_code }}@money($report->costOfConversions->summary->cost_per_conversion) average cost per conversion
                                    </li>
                                    <li class="py-1">
                                        You spent {{ $report->currency_code }}@money($report->costOfConversions->top->cost, 0) (@percent($report->costOfConversions->top->percent_of_total_spend, 0) of your total spend) to acquire this @percent($report->costOfConversions->top->percent_of_conversions, 0) of your conversions.
                                    </li>
                                </ul>
                            </li>

                            <li class="pb-4">
                                <strong>Bottom 25% Keywords by Cost per Conversion:</strong> {{ $report->costOfConversions->limit }} keywords accounted for @percent($report->costOfConversions->bottom_conversion_summary_percentage, 0) of all conversions ({{ number_format($report->costOfConversions->bottom->conversions, 0) }} out of {{ number_format($report->costOfConversions->summary->conversions, 0) }}). You spent {{ $report->currency_code }}@money($report->costOfConversions->bottom->cost, 0) on acquiring these {{ number_format($report->costOfConversions->bottom->conversions, 0) }} conversions.

                                <ul class="pt-2">
                                    <li class="py-1">
                                        {{ $report->currency_code }}@money($report->costOfConversions->bottom->cost_per_conversion) cost per conversion, @percent($report->costOfConversions->bottom->percent_cost_per_conversion, 0) more costly than your {{ $report->currency_code }}@money($report->costOfConversions->summary->cost_per_conversion) average cost per conversion
                                    </li>
                                    <li class="py-1">
                                        You spent {{ $report->currency_code }}@money($report->costOfConversions->bottom->cost, 0) (@percent($report->costOfConversions->bottom->percent_of_total_spend, 0) of your total spend) to acquire this @percent($report->costOfConversions->bottom->percent_of_conversions, 0) of your conversions.
                                    </li>
                                </ul>
                            </li>
                        </ul>

                        <div class="mb-5 w-100" style="height: 250px">
                            <canvas id="top_bottom_conversion_chart" data-currency="{{ $report->currency_code }}" data-values="{{ json_encode(['top_keyword' => 'Top 25%', 'top_keyword_value' => round($report->costOfConversions->top->cost_per_conversion, 2), 'bottom_keyword' => 'Bottom 25%', 'bottom_keyword_value' => round($report->costOfConversions->bottom->cost_per_conversion, 2)]) }}"></canvas>
                        </div>

                        <p>
                            <strong>Reallocate your budget to the better performing keywords to get many more conversions for your same budget.</strong>
                        </p>

                        <div class="modal fade" id="topSummaryKeywords" tabindex="-1" aria-labelledby="topSummaryKeywordsLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-body p-0">
                                        <table class="table">
                                            <thead class="sticky-top">
                                                <tr>
                                                    <th scope="col">Keyword Text</th>
                                                    <th scope="col">Cost</th>
                                                    <th scope="col">Conversions</th>
                                                    <th scope="col">Currency</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($report->costOfConversions->top->keywords as $keyword)
                                                <tr>
                                                    <th>{{ $keyword->keyword_text }}</th>
                                                    <td>@number($keyword->cost)</td>
                                                    <td>{{ $keyword->conversions }}</td>
                                                    <td>{{ $keyword->currency_code }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="bottomSummaryKeywords" tabindex="-1" aria-labelledby="bottomSummaryKeywordsLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-body p-0">
                                        <table class="table">
                                            <thead class="sticky-top">
                                                <tr>
                                                    <th scope="col">Keyword Text</th>
                                                    <th scope="col">Cost</th>
                                                    <th scope="col">Conversions</th>
                                                    <th scope="col">Currency</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($report->costOfConversions->bottom->keywords as $keyword)
                                                <tr>
                                                    <th>{{ $keyword->keyword_text }}</th>
                                                    <td>@number($keyword->cost)</td>
                                                    <td>{{ $keyword->conversions }}</td>
                                                    <td>{{ $keyword->currency_code }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <div class="mt-4">
                    <div id="cro-impact" class="scroll-m-120">
                        <h4>Conversion Rate Optimization Impact</h4>
                    </div>

                    <div class="mt-4">
                        <ul>
                            <li>Your current overall conversion rate is @percent($report->campaigns->getAverageConversionRate()).</li>
                        </ul>

                        <p>
                            Lifting your conversion rate to @percent($report->conversionRateOptimization->lifting_conversion_rate_percentage) (up @number($report->conversionRateOptimization->lifting_conversion_rate_up), or 20%) would mean @number($report->conversionRateOptimization->additional_conversions, 0) additional conversions (@percent($report->conversionRateOptimization->additional_conversions_percentage) additional conversions) on your current budget, if you made no other changes suggested above
                        </p>

                        <div class="my-5 w-100" style="height: 250px">
                            <canvas id="cro_chart" data-currency="{{ $report->currency_code }}" data-values="{{ json_encode(['current' => $report->campaigns->getTotalConversions(), 'cro' => $report->conversionRateOptimization->additional_conversions]) }}"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pb-4 mt-4 border-top"></div>

            <div id="campaign-findings" class="scroll-m-120">
                <h3>Campaign Findings</h3>

                <div class="mt-4">
                    <ul>
                        @if ($report->campaignFinding->campaignA)
                        <li class="py-1">
                            The campaign "{{ $report->campaignFinding->campaignA->campaign_name }}" generated @number($report->campaignFinding->campaignA->conversions, 0) conversions at a {{ $report->currency_code }}@money($report->campaignFinding->campaignA->cost_per_conversion) average cost per conversion
                        </li>
                        @endif
                        @if ($report->campaignFinding->campaignB)
                        <li class="py-1">
                            The campaign "{{ $report->campaignFinding->campaignB->campaign_name }}" generated @number($report->campaignFinding->campaignB->conversions, 0) conversions at a {{ $report->currency_code }}@money($report->campaignFinding->campaignB->cost_per_conversion) average cost per conversion
                        </li>
                        @endif
                        @if ($report->campaignFinding->campaignA && $report->campaignFinding->campaignB)
                        <li class="py-1">
                            If you reallocate the {{ $report->currency_code }}@money($report->campaignFinding->campaignA->cost) spent from "{{ $report->campaignFinding->campaignA->campaign_name }}" to "{{ $report->campaignFinding->campaignB->campaign_name }}", you would get @number(abs($report->campaignFinding->campaignA->conversions - $report->campaignFinding->campaignB->conversions), 0) more leads from that same budget (@number($report->campaignFinding->campaignA->conversions, 0) vs @number($report->campaignFinding->campaignB->conversions, 0)) assuming the numbers scaled consistently
                        </li>
                        @endif
                        @if ($report->campaignFinding->campaignB && $report->campaignFinding->campaignA)
                        <li class="py-1">
                            The campaign "{{ $report->campaignFinding->campaignB->campaign_name }}" generated conversions @percent($report->campaignFinding->campaignABConversions) cheaper than the campaign "{{ $report->campaignFinding->campaignA->campaign_name }}"
                        </li>
                        @endif
                        @if ($report->campaignFinding->campaignC)
                        <li class="py-1">
                            The campaign "{{ $report->campaignFinding->campaignC->campaign_name }}" generated 1 conversion at a {{ $report->currency_code }}@money($report->campaignFinding->campaignC->cost_per_conversion) cost per conversion. This is inefficient, consider turning off.
                        </li>
                        @endif
                        @if ($report->campaignFinding->campaignD && $report->campaignFinding->campaignB)
                        <li class="py-1">
                            From a cost per conversion standpoint, your best performing campaigns are campaign "{{ $report->campaignFinding->campaignD->campaign_name }}" and campaign "{{ $report->campaignFinding->campaignB->campaign_name }}"
                        </li>
                        @endif
                        @if ($report->campaignFinding->campaignE)
                        <li class="py-1">
                            The CTR on the campaign "{{ $report->campaignFinding->campaignE->campaign_name }}" is less than half of your average CTR. Consider updating the ad copy.
                        </li>
                        @endif
                    </ul>
                </div>
            </div>

            <div class="pb-4 mt-4 border-top"></div>

            <div id="health-check-findings" class="scroll-m-120">
                <h3>Health Check Findings</h3>

                <div class="mt-4">
                    <ul>
                        <li class="my-4">
                            Dynamic Ad Headlines & Copy:
                            <div id="dynamic-headlines" class="mt-1" x-target x-init="$ajax('{{ route('report.health-check.dynamic-ad-headlines', $report) }}')">
                                <div class="placeholder-glow">
                                    <span class="placeholder col-10 py-2"></span>
                                </div>
                            </div>
                        </li>
                        <li class="my-4">
                            Target CPA
                            <div class="d-flex mt-1">
                                @if (Arr::get($biddingStrategy, 'TARGET_CPA', 0) > Arr::get($biddingStrategy, 'MAXIMIZE_CONVERSIONS', 0))
                                <x-check-icon />
                                @else
                                <x-xmark-icon />
                                @endif
                                <span class="ms-1">
                                    You have {{ Arr::get($biddingStrategy, 'TARGET_CPA', 0) }} campaigns that Target CPA and {{ Arr::get($biddingStrategy, 'MAXIMIZE_CONVERSIONS', 0) }} campaigns that maximize conversions. Additionally the other campaign strategy types you have
                                    @php
                                    $filtered = Arr::where($biddingStrategy, function ($value, $key) {
                                    return !in_array($key, ['TARGET_CPA', 'MAXIMIZE_CONVERSIONS']);
                                    });

                                    $mapped = Arr::map($filtered, function ($value, $key) {
                                    return Str::of($key)->replace('_', ' ')->title() . ' (' . $value . ')';
                                    });

                                    $text = implode(' AND ', $mapped);
                                    @endphp

                                    @if (count($mapped) == 1)
                                    is
                                    @else
                                    are
                                    @endif

                                    {{ $text }}
                                </span>
                            </div>
                        </li>
                        <li class="my-4">
                            Google Analytics GA4 Integration:
                            <div id="product-link" class="mt-1" x-target x-init="$ajax('{{ route('report.health-check.product-link', $report) }}')">
                                <div class="placeholder-glow">
                                    <span class="placeholder col-10 py-2"></span>
                                </div>
                            </div>
                        </li>
                        <li class="my-4">
                            Negative Keywords:
                            <div class="d-flex align-items-center mt-1">
                                @if (($negativeKeywordTotal = $report->negativeKeywords()->count()) > 0)
                                <x-check-icon />
                                @else
                                <x-xmark-icon />
                                @endif
                                <span class="ms-1">
                                    You have {{ number_format($negativeKeywordTotal, 0) }} negative keywords.
                                </span>
                            </div>
                        </li>
                        <li class="my-4">
                            Conversion Tracking:
                            <div id="conversion-tracking" class="mt-1" x-target x-init="$ajax('{{ route('report.health-check.conversion-tracking', $report) }}')">
                                <div class="placeholder-glow">
                                    <span class="placeholder col-10 py-2"></span>
                                </div>
                            </div>
                        </li>
                        <li class="my-4">
                            Location Targeting:
                            <div id="location-targeting" class="mt-1" x-target x-init="$ajax('{{ route('report.health-check.location-targeting', $report) }}')">
                                <div class="placeholder-glow">
                                    <span class="placeholder col-10 py-2"></span>
                                </div>
                            </div>
                        </li>
                        <li class="my-4">
                            <div>
                                Audience Targeting:
                                <div id="audience-targeting" class="mt-1" x-target x-init="$ajax('{{ route('report.health-check.audience-targeting', $report) }}')">
                                    <div class="placeholder-glow">
                                        <span class="placeholder col-10 py-2"></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </main>
    </div>
</div>
@endsection