@extends('layouts.app')

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
let route = @json([
    'report' => route('reports.show', $report)
])

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);
}

function renderCharts() {
    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);
                        }
                    }
                }
            }
        }
    });

    let cro_chart = document.getElementById('cro_chart');
    let 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'
                }
            }
        }
    });

    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);
                            }
                        }
                    }
                }
            }
        });
    }
}

document.addEventListener("DOMContentLoaded", function() {
    let cro_chart = document.getElementById('cro_chart');
    let 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'
                }
            }
        }
    });

    axios.post(`${route.report}/generate-date-ranges`)
        .then(function (ranges) {
            let array = []
            let snackbar = document.getElementById('snackbar')

            snackbar.className = 'show';

            array.push(
                axios.post(`${route.report}/negative-keywords`)
            )

            ranges.data.forEach(function (item) {
                array.push(
                    axios.post(`${route.report}/keywords`, {start_date: item[0], end_date: item[1]})
                )
            })

            axios.all(array)
                .then(axios.spread(function (acct, perms) {
                    axios.post(`${route.report}/keywords/render`)
                        .then(function (response) {
                            document.getElementById('report-container').innerHTML = response.data

                            renderCharts()

                            snackbar.innerHTML = 'Keyword data ready'

                            setTimeout(function(){ snackbar.className = snackbar.className.replace("show", ""); }, 3000);
                        });
                }));
        });
})
</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') }}" class="w-120px w-md-194px" alt="audit my ads" />
        <img src="{{ asset('images/clutch-logo.png') }}" alt="clutch" class="w-100px w-md-130px" />
    </a>

    <div class="d-flex">
        <a href="{{ route('reports.create') }}" class="btn btn-primary rounded-0">
            RUN A NEW REPORT
        </a>

        <button class="d-none btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu">
            Show Sidebar
        </button>
    </div>
</header>

<div class="container-fluid" id="report-container">
    <div class="row">
        <div id="sidebar" class="sidebar border-end col-md-4 col-lg-3 p-0 bg-white h-100">
            <div class="offcanvas-md offcanvas-end bg-white" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
                <div class="offcanvas-body d-md-flex flex-column px-3 py-5 overflow-y-auto">
                    <h5 class="px-3">Reports</h5>

                    <ul class="nav flex-column mt-3">
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#aggregate-stats">
                                Aggregate Stats
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#keyword-findings">
                                Keyword Findings
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#wasted-spend">
                                Wasted Spend
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#broad-vs-phrase-match">
                                Broad vs Phrase Match
                            </a>
                        </li>
                        @if ($report->costOfConversions->top->cost_per_conversion > 0 && $report->costOfConversions->bottom->cost_per_conversion > 0)
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#top-bottom-conversions">
                                Top/Bottom 25% Conversions
                            </a>
                        </li>
                        @endif
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#cro-impact">
                                CRO Impact
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#campaign-findings">
                                Campaign Findings
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#health-check-findings">
                                Health Check Findings
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="text-black nav-link d-flex align-items-center gap-2 active" href="#improving-results">
                                Improving Results
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <main class="col-md-8 ms-sm-auto col-lg-9 px-md-4 bg-body-tertiary py-5" data-bs-spy="scroll" data-bs-target="#sidebar" data-bs-offset="0">
            <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-5 mt-5 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 class="placeholder-glow">
                        <span class="fw-bold"># Active Keywords with spend of at least {{ $report->currency_code }}1 spend:</span>
                        <span class="placeholder col-1 py-2"></span>
                    </div>
                    <div class="placeholder-glow">
                        <span class="fw-bold"># Active Keywords with 1 or more conversions:</span>
                        <span class="placeholder col-1 py-2"></span>
                    </div>
                    <div class="placeholder-glow">
                        <span class="fw-bold"># Active Keywords with 0 conversions:</span>
                        <span class="placeholder col-1 py-2"></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-5 mt-5 border-top"></div>

            <div id="keyword-container">
                <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">
                            <div class="placeholder-glow">
                                <span class="placeholder col-10 py-2"></span>
                            </div>

                            <ul>
                                <li>
                                    <div class="placeholder-glow">
                                        <span class="placeholder col-12 py-2"></span>
                                    </div>
                                </li>
                            </ul>

                            <div class="placeholder-glow">
                                <span class="placeholder col-10 py-2"></span>
                            </div>

                            <ul>
                                <li>
                                    <div class="placeholder-glow">
                                        <span class="placeholder col-11 py-2"></span>
                                    </div>
                                </li>
                            </ul>

                            <div class="placeholder-glow my-5">
                                <span class="placeholder col-10 py-5"></span>
                            </div>
                        </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">
                                <div class="placeholder-glow">
                                    <p>Broad Match</p>
                                    <ul>
                                        <li>Total Spend: <span class="placeholder col-1"></span></li>
                                        <li>Total Conversions: <span class="placeholder col-1"></span></li>
                                        <li>Average Cost per Conversion: <span class="placeholder col-1"></span></li>
                                    </ul>
                                </div>

                                <div class="placeholder-glow">
                                    <p>Phrase Match</p>
                                    <ul>
                                        <li>Total Spend: <span class="placeholder col-1"></span></li>
                                        <li>Total Conversions: <span class="placeholder col-1"></span></li>
                                        <li>Average Cost per Conversion: <span class="placeholder col-1"></span></li>
                                    </ul>
                                </div>

                                <div class="placeholder-glow">
                                    <p>Exact Match</p>
                                    <ul>
                                        <li>Total Spend: <span class="placeholder col-1"></span></li>
                                        <li>Total Conversions: <span class="placeholder col-1"></span></li>
                                        <li>Average Cost per Conversion: <span class="placeholder col-1"></span></li>
                                    </ul>
                                </div>

                                <div class="placeholder-glow my-5">
                                    <span class="placeholder col-10 py-5" style="height: 200px"></span>
                                </div>

                                <div class="placeholder-glow">
                                    <span class="placeholder col-12 py-2"></span>
                                </div>

                                <div class="placeholder-glow">
                                    <span class="placeholder col-4 py-2"></span>
                                </div>

                                <div class="placeholder-glow mt-4">
                                    <span class="placeholder col-12 py-2"></span>
                                </div>

                                <div class="placeholder-glow">
                                    <span class="placeholder col-4 py-2"></span>
                                </div>
                            </div>
                        </div>

                        <div class="placeholder-glow my-5">
                            <span class="placeholder col-10 py-5" style="height: 200px"></span>
                        </div>
                    </div>

                    <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 class="placeholder-glow">
                                <li class="pb-4">
                                    <strong>Top 25% Keywords by Cost per Conversion:</strong> <span class="placeholder col-6"></span>

                                    <div class="placeholder col-6 mt-2"></div>

                                    <ul class="pt-2">
                                        <li class="py-1">
                                            <span class="placeholder col-12"></span>
                                        </li>
                                        <li class="py-1">
                                            <span class="placeholder col-11"></span>
                                        </li>
                                    </ul>
                                </li>

                                <li class="pb-4">
                                    <strong>Bottom 25% Keywords by Cost per Conversion:</strong> <span class="placeholder col-5"></span>

                                    <ul class="pt-2">
                                        <li class="py-1">
                                            <span class="placeholder col-12"></span>
                                        </li>
                                        <li class="py-1">
                                            <span class="placeholder col-11"></span>
                                        </li>
                                    </ul>
                                </li>
                            </ul>

                            <div class="placeholder-glow my-5">
                                <span class="placeholder col-10 py-5" style="height: 200px"></span>
                            </div>

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

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

                        <div class="mt-4 placeholder-glow">
                            <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-5 mt-5 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-5 mt-5 border-top"></div>

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

                    <div class="mt-4">
                    </div>
                </div>
            </div>

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

            <div class="text-center">
                <a href="{{ $downloadLink }}" class="btn btn-primary">
                    Download PDF
                </a>
            </div>
        </main>
    </div>
</div>

<div id="snackbar">Campaign data is in. We are currently pulling the keyword data and will refresh the report when it is ready.</div>
@endsection