@php
    $locationName = $orderItem['town_name'] ?? $orderItem['authority_name'];
    function rankSuffix($rank)
    {
        $suffix = 'th';

        if (!in_array(($rank % 100), [11, 12, 13])) {
            switch ($rank % 10) {
                case 1:
                    $suffix = 'st';
                    break;
                case 2:
                    $suffix = 'nd';
                    break;
                case 3:
                    $suffix = 'rd';
                    break;
            }
        }

        return $suffix;
    }
@endphp
<style>
@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Regular.eot");
    src: local("Gilroy Regular"), local("Gilroy-Regular"), url("../fonts/Gilroy-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Regular.woff") format("woff"), url("../fonts/Gilroy-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Medium.eot");
    src: local("Gilroy Medium"), local("Gilroy-Medium"), url("../fonts/Gilroy-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Medium.woff") format("woff"), url("../fonts/Gilroy-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Bold.eot");
    src: local("Gilroy Bold"), local("Gilroy-Bold"), url("../fonts/Gilroy-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Bold.woff") format("woff"), url("../fonts/Gilroy-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

html {
    -webkit-print-color-adjust: exact;
    font-family: "Gilroy", sans-serif;
    background: #fff;
}

body,
p,
td,th {
    font-size: 13px;
}
th {
    font-weight: 300;
}
th.text-uppercase {
    font-size: 10px;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
td {
    color: #0b2b3d;
}

h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.75em;
}
h3 {
    font-size: 1.5em;
}

#header {
    background-image: url({{"data:image/jpeg;base64,".base64_encode(file_get_contents(public_path("/images/report/vista_header.jpg")))}});
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    position: relative;
}
#header .intro__content {
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, #272442 0%, transparent 100%);
        z-index: 1;
        flex-direction: column;
        height: 400px;
      }
      #intro__about {
        background-color: #e8f2e4;
        padding: 1.5em 2.25em 1em 2.25em;
      }
      #intro__about p {
        font-size: 15px;
        line-height: 1.2em;
      }
      .faintBlue {
        background-color: #ebeeef;
      }
      .lightBlue {
        background-color:#e7f6fd;
      }
      .faintGreen {
        background-color: #e8f2e4;
      }
      .bg--orange {
        background-color:#f4b223;
      }
      .bg--brightgreen {
        background-color:#85bd41;
      }
      .bg--darkgreen {
        background-color:#41ad49;
      }
      .text--white {
        color: #fff;
      }
      .text--center {
        text-align: center;
      }
      .text--larger {
        font-size: 120%;
      }
      .mx-auto {
        margin-left: auto;
        margin-right: auto;
      }
      .ml--2 {
        margin-left: 2em;
      }
      .mr--2 {
        margin-right: 2em;
      }
      .mt--2 {
        margin-top: 2em;
      }
      .pt--1 {
        padding-top: 1em;
      }
      .pb--1 {
        padding-bottom: 1em;
      }
      .pb--2 {
        padding-bottom: 2em;
      }
      .pb--3 {
        padding-bottom: 3em;
      }
      .pl--1 {
        padding-left: 1em;
      }
    .pr--1 {
        padding-right: 1em;
    }
    .pr--1_5 {
        padding-right: 1.5em;
    }
    .pl--1_5 {
        padding-left: 1.5em;
    }
    .detailsBlock {
        padding-top: 1em;
        padding-bottom: 1em;
        margin-top: 1em;
        border-top: 1px solid #a7a9ac;
    }
      .contentBlock {
        padding: 1.5em 1em;
      }
      .contentBlock--left {
        padding-left: 2.25em;
      }
      .contentBlock--right {
        padding-right: 2.25em;
      }
      .contentBlock--wide {
        padding-right: 2.25em;
        padding-left: 2.25em;
      }
      .noMargin {
        margin: 0 !important;
      }
      .table--striped {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0.75em 0;
        margin-left: -0.75em;
        margin-right: -0.75em;
      }
      .table--larger td {
        font-size: 15px;
      }
      .align-content-center {
        justify-content: center;
      }
    .text-uppercase {
        text-transform: uppercase
    }
      .table--striped td {
        padding: 0.5em .25em;
        border-bottom: 1px solid #a7a9ac;
        position: relative;
        border-spacing: 1em 0;
      }
      .table--striped tr:first-child td {
        border-top: 1px solid #a7a9ac;
      }
      .table--striped tr.even td {
        background-color: #ebeeef;
      }
      .table--striped tr.highlight td {
        background-color: #e8f2e4 !important;
        font-weight: bold;
      }
      .table--datapoints {
        width: 100%;
        border-collapse: separate;
      }

      .table--datapoints td {
        padding: 0.5em 0em;
        border-bottom: 1px solid #a7a9ac;
        position: relative;
        border-spacing: 2em 0;
        vertical-align: top;

      }
      .table--datapoints div {
        min-height: 120px;
      }
    .table--datapoints tr:first-child td {
        border-top: 1px solid #a7a9ac;
    }
    .table--datapoints td:nth-child(2) {
        background: #edf2f3;
        width: 80%;
        padding: .5em;

    }
    .table--factors td:first-child {
      width: 50%;
      background: #fff;
    }
    .table--factors td {
      width: 10%;
      font-size: 12px;
      background: #edf2f3;
    }
      .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -0.75em;
        margin-right: -0.75em;
      }
      .col-6 {
        flex: 0 0 50%;
        width: 50%;
      }
      .col-3 {
        flex: 0 0 25%;
        width: 25%;
      }
      .col-4 {
        flex: 0 0 33%;
        width: 33%;
      }
      .col-8 {
        flex: 0 0 66%;
        width: 66%;
        padding-left: 15px;
      }
      .pt--0 {
        padding-top: 0 !important;
      }
      .text-left {
        text-align: left;
      }
      .text-center {
        text-align: center;
      }
      .text--bold {
        font-weight: bold !important;
      }
      .speedoGraph {
        position: relative;
        width: 160px;
        margin-left: auto;
        margin-right: auto;
      }
      .speedoGraph--graphics {
        position: relative;
      }
      .speedoGraph .needle {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      .table--sdg {
        margin-top: 1em;
        margin-bottom: 1em;
        border-spacing: 15px;
        margin-left: -15px;
        margin-right: -15px;

      }
      .table--sdg td {
        width: 20%;
        gap: 10px;

      }
      .table--sdg td img{
        width: 100%;
        height: auto;
      }
      .table--segment {
        margin-top: 1em;
        margin-bottom: 1em;
        border-spacing: 15px;
        margin-left: -15px;
        margin-right: -15px;

      }
      .table--segment td {
        width: 25%;
      }
      .table--actions {
        margin-top: 1em;
        margin-bottom: 1em;
        border-spacing: 6px 0;
        margin-left: -6px;
        margin-right: -6cm;
        width: 100%;

      }

      .table--actions td {
        width: 25%;
      }
      .table--actions td  div{
        min-height: 140px;
        padding: 4px;
      }
      .table--actions th {
        font-size: 1.1em;
        padding: .5em 0;
      }
      .table--actions tr:nth-child(even) td {
        border-top: 1px solid #e8e9e9;
        border-bottom: 1px solid #e8e9e9;
      }
    .table--actions tr:nth-child(odd) td:first-child {
        background-color: #f9fcf5;
    }
    .table--actions tr:nth-child(odd) td:nth-child(2) {
        background-color: #faf9f3;
    }
    .table--actions tr:nth-child(odd) td:nth-child(3) {
        background-color: #eff9fe;
    }
    .table--actions tr:nth-child(odd) td:nth-child(4) {
        background-color: #f3f4f5;
    }
      .table--segment td li {
        text-align: left;
        margin-bottom:1em;
        color:#0b2b3d;
        font-size: 13px;
      }
      .table--segment td img{
        width: 100%;
        height: auto;
      }

      .speedoGraph .needle svg {
        transform-origin: 50% 56px;
      }

      .resultsRank {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        /*width: 200px;*/
        width:140px;

      }
      .resultsRank--label {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 40px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
    }
      .resultsRank--score {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 30px;
        font-weight: bold;
        color: #85bd41;
        font-size: 64px;
        letter-spacing: -5px;
        font-size: 36px;
        letter-spacing: -2px;
        bottom: 22px;
      }
      .resultsRank--smaller {
        width:140px;
        .resultsRank--score {
            font-size: 36px;
            letter-spacing: -2px;

        }
      }
    .bg--red {
      background-color: #d2232a !important;
    }
    .bg--amber {
      background-color: #e64b38 !important;
    }
    .bg--yellow {
      background-color: #f4b223 !important;
    }
    .bg--lightgreen {
      background-color: #85bd41 !important;
    }
    .bg--green {
      background-color: #41ad49 !important;
    }
</style>
<div>
    <div class="container-fluid">
        <section id="header">
            <div class="intro__content">
                <img width="200px"
                    src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjExLjggOTMuNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjExLjh2OTMuNEgweiIvPjwvY2xpcFBhdGg+PHN0eWxlPi5zdDF7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNhKSI+PHBhdGggZmlsbD0iIzBjMmIzZCIgZD0iTTE3Mi40IDM0YzExLjggMy40IDIzLjcgMy40IDM1LjYgMC0uMS4yLS4yLjMtLjMuNS0uNi44LTEuMyAxLjYtMi4xIDIuNC01LjEgNS0xMC4xIDEwLTE1LjEgMTUtLjIuMi0uMi4yLS40IDAtNS01LTEwLjEtMTAtMTUuMS0xNS0uOS0uOS0xLjctMS45LTIuNS0yLjl6bS4yLjJjMCAuMSAwIC4yLjEuMi42LjkgMS40IDEuNyAyLjIgMi41IDUgNSAxMCAxMCAxNSAxNC45LjIuMi4zLjIuNCAwIDQuOS00LjkgOS44LTkuNyAxNC43LTE0LjYuNy0uNyAxLjQtMS40IDItMi4xLjItLjMuNC0uNi43LS45LTExLjggMy4yLTIzLjQgMy4yLTM1LjEgMHoiLz48cGF0aCBkPSJNMTcyLjYgMzQuMmMxMS43IDMuMyAyMy4zIDMuMyAzNS4xIDAtLjMuMy0uNS42LS43LjktLjYuOC0xLjMgMS41LTIgMi4xLTQuOSA0LjgtOS44IDkuNy0xNC43IDE0LjYtLjIuMi0uMi4yLS40IDAtNS01LTEwLTEwLTE1LTE0LjktLjgtLjgtMS41LTEuNi0yLjItMi41IDAgMC0uMS0uMS0uMS0uMnoiIGNsYXNzPSJzdDEiLz48cGF0aCBmaWxsPSIjODdiZDQyIiBkPSJNMTY4LjQgMjIuOHYtMi41Yy4xLTEuNy40LTMuNC45LTUuMSAyLjYtOC4zIDEwLTE0LjMgMTguOC0xNS4xIDIuNy0uMiA1LjMgMCA3LjkuNyAxMC40IDIuOSAxNy4xIDEzLjEgMTUuNSAyMy44LS41IDMuNC0xLjcgNi40LTMuNiA5LjItLjEuMS0uMi4yLS40LjMtNS4xIDEuNC0xMC4zIDIuMi0xNS42IDIuNGgtMy43Yy0xLjIgMC0yLjMtLjEtMy41LS4yLTQuMi0uNC04LjMtMS4xLTEyLjMtMi4zIDAgMC0uMiAwLS4yLS4yLTIuMi0zLjEtMy40LTYuNi0zLjgtMTAuNHYtLjZ6bTIxLjcgMTEuNGM2LjkgMCAxMi42LTUuNiAxMi42LTEyLjVzLTUuNi0xMi42LTEyLjYtMTIuNi0xMi42IDUuNi0xMi42IDEyLjUgNS42IDEyLjYgMTIuNiAxMi42eiIvPjxwYXRoIGQ9Ik0xOS44IDY4LjlMMjkgNDIuN2gxMC43TDI1LjQgODAuMkgxNC4zTDAgNDIuN2gxMC43bDkuMSAyNi4yem0yOS40LTMwLjdjLTEuNiAwLTMtLjYtNC4yLTEuOHMtMS44LTIuNi0xLjgtNC4yLjYtMyAxLjgtNC4yIDIuNi0xLjggNC4yLTEuOCAzLjEuNiA0LjMgMS44YzEuMiAxLjIgMS44IDIuNiAxLjggNC4ycy0uNiAzLTEuOCA0LjItMi42IDEuOC00LjMgMS44em00LjkgNDJoLTkuN1Y0Mi43aDkuN3YzNy41em0xNy42LTI2LjhjMCAxLjYgMi4zIDMgNi45IDQuMSAxLjYuMyAzLjEuOCA0LjQgMS4yIDEuMy41IDIuNiAxLjIgNCAyIDEuMy45IDIuNCAyIDMuMSAzLjUuOCAxLjQgMS4xIDMuMSAxLjEgNSAwIDMuOC0xLjUgNi44LTQuNCA4LjktMi45IDIuMS02LjUgMy4xLTEwLjggMy4xLTcuNyAwLTEzLTMtMTUuOC04LjlsOC40LTQuN2MxLjIgMy4yIDMuNiA0LjkgNy40IDQuOXM1LjItMS4xIDUuMi0zLjItMi4zLTMtNi45LTQuMWMtMS43LS40LTMuMi0uOS00LjQtMS4zLTEuMi0uNS0yLjUtMS4xLTMuOS0yLTEuNC0uOS0yLjUtMi0zLjItMy40LS43LTEuNC0xLjEtMy0xLjEtNC44IDAtMy43IDEuNC02LjYgNC4xLTguNyAyLjgtMi4yIDYuMi0zLjIgMTAuMi0zLjJzNS44LjcgOC40IDIuMWMyLjUgMS40IDQuNSAzLjMgNiA1LjlsLTguMyA0LjVjLTEuMi0yLjUtMy4yLTMuOC02LTMuOHMtMi4zLjMtMy4xLjljLS44LjYtMS4yIDEuMy0xLjIgMi4yem00Ni4xLTEwLjdWNTJoLTguNXYxNS42YzAgMS4zLjMgMi4yIDEgMi44czEuNi45IDIuOSAxaDQuN3Y4LjhjLTYuNi44LTExLjMuMS0xNC4xLTEuOC0yLjgtMi00LjItNS42LTQuMi0xMC44VjUySDkzdi05LjNoNi42di03LjZsOS43LTIuOXYxMC41aDguNXptMzQuNCA0LjR2LTQuNGg5Ljd2MzcuNWgtOS43di00LjRjLTIuOSAzLjctNyA1LjUtMTIuMyA1LjVzLTkuNC0xLjktMTMtNS43Yy0zLjYtMy44LTUuMy04LjUtNS4zLTE0LjFzMS44LTEwLjIgNS4zLTE0YzMuNi0zLjggNy45LTUuOCAxMy01LjhzOS40IDEuOCAxMi4zIDUuNXptLTE4IDIyYzIgMS45IDQuNCAyLjkgNy41IDIuOXM1LjUtMSA3LjUtMi45YzItMiAzLTQuNiAzLTcuNnMtMS01LjYtMy03LjYtNC40LTMtNy41LTMtNS41IDEtNy41IDMtMi45IDQuNS0yLjkgNy42IDEgNS42IDIuOSA3LjZ6TTg2LjMgODguM3YtLjdoLjd2NC4yaC0uN3YtLjdjLS40LjYtLjkuOC0xLjYuOHMtMS4xLS4yLTEuNS0uNmMtLjQtLjQtLjYtLjktLjYtMS42cy4yLTEuMS42LTEuNi45LS42IDEuNS0uNiAxLjIuMyAxLjYuOHptLTEuNSAyLjljLjQgMCAuOC0uMSAxLjEtLjQuMy0uMy40LS43LjQtMS4xcy0uMS0uOC0uNC0xLjFjLS4zLS4zLS42LS40LTEuMS0uNHMtLjguMS0xLjEuNC0uNC42LS40IDEuMS4xLjguNCAxLjFjLjMuMy42LjQgMS4xLjR6bTkuNC0xLjJoLTMuNWMwIC40LjIuNy41LjkuMy4yLjYuMyAxIC4zcy45LS4yIDEuMi0uNmwuNi4zYy0uNC42LTEgLjktMS44LjlzLTEuMi0uMi0xLjYtLjZjLS40LS40LS42LS45LS42LTEuNnMuMi0xLjIuNi0xLjYuOS0uNiAxLjYtLjYgMS4xLjIgMS41LjdjLjQuNC42LjkuNiAxLjZ2LjN6bS0yLTEuOGMtLjQgMC0uNy4xLTEgLjMtLjMuMi0uNC41LS41LjloMi44YzAtLjQtLjItLjctLjUtLjlzLS41LS4zLS45LS4zem01LjggMS42di0yLjJoLjd2NC4ySDk4di0uNmMtLjMuNS0uNy43LTEuNC43cy0uOS0uMi0xLjItLjVjLS4zLS4zLS40LS43LS40LTEuMnYtMi42aC43djIuNWMwIC4zIDAgLjYuMy44LjIuMi40LjMuOC4zcy43LS4xLjktLjNjLjItLjIuMy0uNi4zLTF6bTQuMS0yLjJ2LjdIMTAxdjIuM2MwIC4yIDAgLjMuMS40IDAgMCAuMi4xLjQuMWguNnYuN2MtLjYgMC0xLjEgMC0xLjQtLjJzLS40LS41LS40LTEuMXYtMi4zaC0uOHYtLjdoLjh2LS45bC43LS4ydjEuMmgxLjF6bTQuMiAzLjdjLS40LjQtLjkuNi0xLjYuNnMtMS4xLS4yLTEuNi0uNmMtLjQtLjQtLjYtLjktLjYtMS42cy4yLTEuMS42LTEuNmMuNC0uNC45LS42IDEuNi0uNnMxLjEuMiAxLjYuNmMuNC40LjYuOS42IDEuNnMtLjIgMS4xLS42IDEuNnptLTEuNi0uMWMuNCAwIC44LS4xIDEuMS0uNC4zLS4zLjQtLjYuNC0xLjFzLS4xLS44LS40LTEuMWMtLjMtLjMtLjYtLjQtMS4xLS40cy0uOC4xLTEuMS40Yy0uMy4zLS40LjYtLjQgMS4xcy4xLjguNCAxLjFjLjMuMy42LjQgMS4xLjR6bTMuNS00LjNjLS4xIDAtLjMgMC0uMy0uMSAwIDAtLjEtLjItLjEtLjNzMC0uMi4xLS4zLjItLjIuMy0uMi4yIDAgLjMuMmMwIDAgLjEuMi4xLjNzMCAuMi0uMS4zLS4yLjEtLjMuMXptLjMgNC45aC0uN3YtNC4yaC43djQuMnptNC42LTMuNXYtLjdoLjd2NC4yaC0uN3YtLjdjLS40LjYtLjkuOC0xLjYuOHMtMS4xLS4yLTEuNS0uNmMtLjQtLjQtLjYtLjktLjYtMS42cy4yLTEuMS42LTEuNmMuNC0uNC45LS42IDEuNi0uNnMxLjEuMiAxLjYuNmMuNC40LjYuOS42IDEuNnMtLjIgMS4xLS42IDEuNnptLTEuNi0uMWMuNCAwIC44LS4xIDEuMS0uNC4zLS4zLjQtLjYuNC0xLjFzLS4xLS44LS40LTEuMWMtLjMtLjMtLjYtLjQtMS4xLS40cy0uOC4xLTEuMS40Yy0uMy4zLS40LjYtLjQgMS4xcy4xLjguNCAxLjFjLjMuMy42LjQgMS4xLjR6bTUuMi0zLjdjLjUgMCAuOS4yIDEuMi41LjMuMy40LjcuNCAxLjJ2Mi42aC0uN3YtMi41YzAtLjMgMC0uNi0uMy0uOHMtLjQtLjMtLjgtLjMtLjcuMS0uOS4zLS4zLjYtLjMgMXYyLjJoLS43di00LjJoLjd2LjZjLjMtLjUuNy0uNyAxLjQtLjd6IiBjbGFzcz0ic3QxIi8+PC9nPjwvc3ZnPg=="
                    alt="Vista by Eutopia" class="mt--2" />
                <h2 class="mt--1 text--white mb--1">Place Analytics to shape your future</h2>
                <h1 class="text--white">{{ $locationName }} Place Report</h1>
            </div>
        </section>
        <section id="intro__about">
            <h3>About your report</h3>
            <p class="text--medium">
                This Vista report is produced by eutopia and includes scores based on quantitative and qualitative datasets. The quantitative data is gathered from a range of data providers through
                APIs and manual updates where APIs are not available. Qualitative data is collated using multiple opensource datapoints and is dynamic. Place scores and rankings are developed through
                Vista’s unique AI enabled algorithm and have been extensively tested. Place perception scores are dynamic and updated
                regularly as part of your subscription using the log in details provided.
            </p>
        </section>
    </div>
    <section id="intro__criteria">
        <div class="row noMargin">
            <div class="col-6">
                <div class="contentBlock contentBlock--left">
                    <h3>The criteria for your report</h3>
                    <table class="table--striped">
                        <tr>
                            <td>Your location</td>
                            <td class="text-center text--bold">{{ $locationName }}</td>
                        </tr>
                        <tr class="even">
                            <td>Your Vista region</td>
                            <td class="text-center text--bold">
                                @php
                                    $place = is_string($order->place) ? json_decode($order->place) : $order->place;
                                @endphp
                                {{ $place->region ?? '' }}
                            </td>
                        </tr>
                        <tr>
                            <td>No. of data points evaluated</td>
                            <td class="text-center text--bold">-</td>
                        </tr>
                        <tr class="even">
                            <td>Order type</td>
                            <td class="text-center text--bold">Vista</td>
                        </tr>
                        <tr>
                            <td>Report ordered</td>
                            <td class="text-center text--bold">{{ $order->created_at->format('d/m/Y') }}</td>
                        </tr>
                        <tr class="even">
                            <td>Report finalised</td>
                            <td class="text-center text--bold">{{ $orderItem->updated_at->format('d/m/Y') }}</td>
                        </tr>
                        <tr>
                            <td>Client contact</td>
                            <td class="text-center text--bold">
                                @php
                                    $address = is_string($order->address) ? json_decode($order->address, true) : $order->address;
                                @endphp
                                {{ $address['name'] ?? '' }}{{ ($address['name'] && $address['organisation']) ? ', ' : '' }}{{ $address['organisation'] ?? '' }}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-6">
                <div class="faintBlue contentBlock contentBlock--right">
                    <h3>This report provides</h3>
                    <ol>
                        <li>{{ $locationName }}'s place attractiveness score and ranking <span class="text--medium">{{ $locationName }}'s scores by place pillar:</span></li>
                        <li>
                            Invest
                            <ol type="a">
                                <li>FDI performance</li>
                                <li>Enterprise performance</li>
                                <li>Infrastructure development</li>
                            </ol>
                        </li>
                        <li>
                            Live
                            <ol type="a">
                                <li>Quality of Life</li>
                                <li>Prosperity</li>
                                <li>Community Power</li>
                            </ol>
                        </li>
                        <li>Visit</li>
                        <li>Study</li>
                        <li>{{ $locationName }}'s performance in regional context<br /><small>(this will be pulled from data in model)</small></li>
                        <li>SDG alignment</li>
                        <li>Place perceptions</li>
                        <li>Your place characteristics</li>
                        <li>Recommendations to enhance your place performance</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
</div>

@pageBreak

<div>
    <section id="intro__criteria">
        <div class="row noMargin">
            <div class="col-6">
                <div class="faintBlue contentBlock contentBlock--left pt--2 pb--2">
                    <h3 class="mt--2">Your results at a glance</h3>
                    <p class="text--center text--larger">Your overall place attractiveness
                        based on these scores:</p>
                    <div class="resultsRank">
                        <div class="resultsRank--score">{{ $resultData['overall_attractiveness_rank'] }}</div>
                        <svg fill="#85bd41" viewBox="0 0 106.58 128.64" xmlns="http://www.w3.org/2000/svg" xmlns:v="https://vecta.io/nano">
                            <path
                                d="m53.29 128.64-37.68-37.67c-2.16-2.16-4.14-4.51-5.9-7.01 14.25 4.18 29.03 6.3 43.88 6.29 14.59 0.01 29.1-2.03 43.12-6.07-1.72 2.42-3.64 4.68-5.74 6.78l-37.68 37.68z" />
                            <path
                                d="M53.29 84.57c17.12 0 31.01-13.88 31-31.01 0-17.12-13.88-31.01-31.01-31-17.12 0-31.01 13.88-31 31.01 0 17.12 13.88 31 31.01 31h0zm-43.58-.61A53.03 53.03 0 0 1 0 53.57v-.28C0 23.86 23.86 0 53.29 0s53.29 23.86 53.29 53.29v.28a53.01 53.01 0 0 1-9.86 30.61 155.31 155.31 0 0 1-43.12 6.07 155.54 155.54 0 0 1-43.88-6.29" />
                        </svg>
                    </div>
                    @php
                        $rank = $resultData['overall_attractiveness_rank'];
                        $suffix = 'th';
                        if (!in_array(($rank % 100), [11, 12, 13])) {
                            switch ($rank % 10) {
                                case 1:
                                    $suffix = 'st';
                                    break;
                                case 2:
                                    $suffix = 'nd';
                                    break;
                                case 3:
                                    $suffix = 'rd';
                                    break;
                            }
                        }
                    @endphp
                    <p class="text--center"><small>{{ $locationName }} ranked {{ $rank }}{{ $suffix }} from all Local Authorities</small></p>
                </div>
            </div>
            <div class="col-6">
                <div class=" contentBlock contentBlock--right">
                    <h3>Your scores by place pillar</h3>
                    <div class="row noMargin">
                        <div class="col-6">
                            @component('components.speedGraph', ['title' => 'Invest', 'smaller' => true, 'score' => $resultData['investment_pillar_score_normalized'] ?? 0])
                            @endcomponent
                        </div>
                        <div class="col-6">
                            @component('components.speedGraph', ['title' => 'Visit', 'smaller' => true, 'score' => $resultData['new_visit_score_normalized'] ?? 0])
                            @endcomponent
                        </div>
                        <div class="col-6">
                            @component('components.speedGraph', ['title' => 'Live', 'smaller' => true, 'score' => $resultData['livability_pillar_score_normalized'] ?? 0])
                            @endcomponent
                        </div>
                        <div class="col-6">
                            @component('components.speedGraph', ['title' => 'Study', 'smaller' => true, 'score' => $resultData['new_study_score_normalized'] ?? 0])
                            @endcomponent
                        </div>
                    </div>
                    <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 0em;">
                        <div>LOWER SCORES</div>
                        <div>HIGHER SCORES</div>
                      </div>
                    <svg viewBox="0 0 248.03 6.38" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:v="https://vecta.io/nano">
                        <path d="M0 0h49.91v6.38H0z" fill="#d2232a"/>
                        <path d="M99.06 0h49.91v6.38H99.06z" fill="#f4b223"/>
                        <path d="M49.53 0h49.91v6.38H49.53z" fill="#e64b38"/>
                        <path d="m148.59 0h49.91v6.38h-49.91z" fill="#85bd41"/>
                        <path d="m198.12 0h49.91v6.38h-49.91z" fill="#41ad49"/>
                    </svg>

                </div>
            </div>
        </div>
    </section>
    <section class="contentBlock contentBlock--wide">
        <h3>Your rankings in each pillar area</h3>
        <p class="text--medium">
        <table class="table--striped">
            <thead>
                <tr>
                    <th></th>
                    <th class="text-center text--bold">Invest</th>
                    <th class="text-center text--bold">Visit</th>
                    <th class="text-center text--bold">Live</th>
                    <th class="text-center text--bold">Study</th>
                </tr>
            </thead>
            <tr>
                <td>Score</td>
                <x-score-cell :score="$resultData['investment_pillar_score_normalized'] ?? 0" />
                <x-score-cell :score="$resultData['new_visit_score_normalized'] ?? 0" />
                <x-score-cell :score="$resultData['livability_pillar_score_normalized'] ?? 0" />
                <x-score-cell :score="$resultData['new_study_score_normalized'] ?? 0" />
            </tr>
            <tr class="even">
                <td>Benchmark score</td>
                <td class="text-center text--medium">56%</td>
                <td class="text-center text--medium">55%</td>
                <td class="text-center text--medium">61%</td>
                <td class="text-center text--medium">55%</td>
            </tr>
            <tr>
                <td>Ranking (363 Locations)</td>
                <td class="text-center text--bold">{{ $resultData['investment_pillar_score_rank'] ?? 0 }}</td>
                <td class="text-center  text--bold">{{ $resultData['new_visit_score_rank'] ?? 0 }}</td>
                <td class="text-center  text--bold">{{ $resultData['livability_pillar_score_rank'] ?? 0 }}</td>
                <td class="text-center  text--bold">{{ $resultData['new_study_score_rank'] ?? 0 }}</td>
            </tr>
        </table>
        </p>
    </section>
    <section class="mt--2 contentBlock contentBlock--wide faintGreen">
        <h3>Your Qualitative Scores</h3>
        <div class="row  align-content-center">
            <div class="col-3">
                @component('components.speedGraph', ['title' => 'Sustainability', 'smaller' => true, 'score' => $resultData['sdg_alignment_score_normalized'] ?? 0])
                @endcomponent
            </div>
            <div class="col-3">
                @component('components.speedGraph', ['title' => 'Community', 'smaller' => true, 'score' => $resultData['community_power_normalized'] ?? 0])
                @endcomponent
            </div>
            <div class="col-3">
                @component('components.speedGraph', ['title' => 'Infrastructure', 'smaller' => true, 'score' => $resultData['infrastructure_score_normalized'] ?? 0])
                @endcomponent
            </div>
        </div>
    </section>
</div>
@pageBreak
<div class="placeAttractiveness">
    <h3>Your Overall Place Attractiveness Ranking</h3>'
    <section>
        <div class="row pb--2 noMargin">
            <div class="col-6">
                @component('components.resultsRank', ['score' => $resultData['overall_attractiveness_rank'] ])
                @endcomponent
                <p class="text--center"><small>{{ $locationName }} ranked {{ $rank }}{{ $suffix }} from all locations in GB</small></p>
                <div style="margin-top:8em;margin-left:3em;">
                    <p class="text-left">Your closest competitors across GB are:</p>
                    <table class="table--larger table--striped" >
                        <thead>
                            <tr>
                                <th>Town</th>
                                <th>Score</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $rowNumber = 0;
                            @endphp
                            @foreach($closestCompetitors as $competitor)
                                @php
                                    $rowNumber++;
                                @endphp
                                <tr class="{{ $rowNumber % 2 == 0 ? 'even' : '' }}{{ $competitor['town'] == $locationName ? ' highlight' : '' }}">
                                    <td>{{ $competitor['town'] }}</td>
                                    <td class="text-center">{{ $competitor['rank'] }}</td>

                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-6">
                @component('components.map')
                @endcomponent
            </div>
        </div>
    </section>
    <section class="mt--2 lightBlue contentBlock ">
        <h3>Your Regional Performance</h3>
        <div class="row pb--1">
            @component('components.resultsRank', ['label' => 'Invest', 'smaller' => true, 'score' => '43rd','color' => '#00aeef'])
            @endcomponent
            @component('components.resultsRank', ['label' => 'Live', 'smaller' => true, 'score' => '35th','color' => '#00aeef'])
            @endcomponent
            @component('components.resultsRank', ['label' => 'Visit', 'smaller' => true, 'score' => '46th','color' => '#00aeef'])
            @endcomponent
            @component('components.resultsRank', ['label' => 'Study', 'smaller' => true, 'score' => '55th','color' => '#00aeef'])
            @endcomponent
            @component('components.resultsRank', ['label' => 'Combined', 'smaller' => true, 'score' => '49th','color' => '#00aeef'])
            @endcomponent
        </div>
        <p class="text-center">
            These rankings represent performance in a regional context – out of 64 towns in the South East
        </p>
    </section>
</div>

@pageBreak

<div class="placeAttractiveness">
    <h2 class="text-center">Your Investment Score</h2>
    <section>
        <div class="row pb--1 noMargin">
            <div class="col-4">
                @php
                    $investmentRank = $resultData['investment_pillar_score_rank'];
                    $investmentSuffix = rankSuffix($investmentRank);
                @endphp
                @component('components.resultsRank', ['score' => $investmentRank])
                @endcomponent
                <p class="text--center"><small>{{ $locationName }} ranked {{ $investmentRank }}{{ $investmentSuffix }}  from all towns</small></p>
            </div>
            <div class="col-9">
                <h3>Your scores by sub-category</h3>
                <div class="row" style="gap:1em">
                    @component('components.speedGraph', ['title' => 'FDI performance', 'smaller' => true, 'score' => $resultData['fdi_score_normalized']])
                    @endcomponent
                    @component('components.speedGraph', ['title' => 'Infrastructure', 'smaller' => true, 'score' => $resultData['infrastructure_score_normalized']])
                    @endcomponent
                    @component('components.speedGraph', ['title' => 'Enterprise', 'smaller' => true, 'score' => $resultData['enterprise_score_normalized']])
                    @endcomponent
                </div>
            </div>
        </div>
    </section>
    <section class="contentBlock pt--0 bg--white">
        <h3>Factors impacting your score:</h3>
        <table class="table--striped table--factors">
            <thead>
                <tr>
                    <th class="text-left text--bold">Performance Factor</th>
                    <th class="text-center text-uppercase">Low</th>
                    <th class="text-center text-uppercase">Low-Moderate</th>
                    <th class="text-center text-uppercase">Moderate</th>
                    <th class="text-center text-uppercase">Moderate-High</th>
                    <th class="text-center text-uppercase">High</th>
                </tr>
            </thead>

            @foreach($investmentData as $investmentRow)
                        @if (isset($investmentRow['value']))
            <tr>
                <td>{{ $label }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 0 && $evaluationValue <= 20) ? 'bg--red text--white' : '' }}">{{ ($evaluationValue > 0 && $evaluationValue <= 20) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 20 && $evaluationValue <= 40) ? 'bg--amber text--white' : '' }}">{{ ($evaluationValue > 20 && $evaluationValue <= 40) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 40 && $evaluationValue <= 60) ? 'bg--yellow text--white' : '' }}">{{ ($evaluationValue > 40 && $evaluationValue <= 60) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 60 && $evaluationValue <= 80) ? 'bg--lightgreen text--white' : '' }}">{{ ($evaluationValue > 60 && $evaluationValue <= 80) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 80 && $evaluationValue <= 100) ? 'bg--green text--white' : '' }}">{{ ($evaluationValue > 80 && $evaluationValue <= 100) ? $displayValue : '' }}</td>
            </tr>
            @endif
            @endforeach
        </table>
    </section>
</div>
@pageBreak



<div class="placeAttractiveness">
    <h2 class="text-center">Your Live Scores</h2>
    <section>
        <div class="row pb--1 noMargin">
            <div class="col-4">
                @php
                    $liveRank = $resultData['livability_pillar_score_rank'];
                    $liveSuffix = rankSuffix($liveRank);
                @endphp
                @component('components.resultsRank', ['score' => $liveRank])
                @endcomponent
                <p class="text--center"><small>{{ $locationName }} ranked {{ $liveRank }}{{ $liveSuffix }} from all towns</small></p>
            </div>
            <div class="col-9 pt--0">
                <h3>Your scores by sub-category</h3>
                <div class="row" style="gap:1em">
                    @component('components.speedGraph', ['title' => 'Quality of Life', 'smaller' => true, 'score' => $resultData['quality_of_life_score_normalized']])
                    @endcomponent
                    @component('components.speedGraph', ['title' => 'Prosperity', 'smaller' => true, 'score' => $resultData['prosperity_score_normalized']])
                    @endcomponent
                    @component('components.speedGraph', ['title' => 'Community Power', 'smaller' => true, 'score' => $resultData['community_power_normalized']])
                    @endcomponent
                </div>
            </div>
        </div>
    </section>
    <section class="contentBlock ">
        <h3>Factors impacting your score:</h3>
        <table class="table--striped table--factors">
            <thead>
                <tr>
                    <th class="text-left text--bold">Performance Factor</th>
                    <th class="text-center text-uppercase">Low</th>
                    <th class="text-center text-uppercase">Low-Moderate</th>
                    <th class="text-center text-uppercase">Moderate</th>
                    <th class="text-center text-uppercase">Moderate-High</th>
                    <th class="text-center text-uppercase">High</th>
                </tr>
            </thead>
            @foreach($liveData as $liveRow)
                        @if (isset($liveRow['value']) && $liveRow['value'] != 0)
            <tr>
                <td>{{ $label }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 0 && $evaluationValue <= 20) ? 'bg--red text--white' : '' }}">{{ ($evaluationValue > 0 && $evaluationValue <= 20) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 20 && $evaluationValue <= 40) ? 'bg--amber text--white' : '' }}">{{ ($evaluationValue > 20 && $evaluationValue <= 40) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 40 && $evaluationValue <= 60) ? 'bg--yellow text--white' : '' }}">{{ ($evaluationValue > 40 && $evaluationValue <= 60) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 60 && $evaluationValue <= 80) ? 'bg--lightgreen text--white' : '' }}">{{ ($evaluationValue > 60 && $evaluationValue <= 80) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 80 && $evaluationValue <= 100) ? 'bg--green text--white' : '' }}">{{ ($evaluationValue > 80 && $evaluationValue <= 100) ? $displayValue : '' }}</td>
            </tr>
            @endif
            @endforeach
        </table>
    </section>
</div>
@pageBreak


<div class="placeAttractiveness">
    <h2 class="text-center">Your Visit Scores</h2>
    <section>
        <div class="row pb--1 noMargin">
            <div class="col-8">
                {{ $orderItem['visit_scores_description'] }}
            </div>
            <div class="col-4">
                @php
                    $visitRank = $resultData['new_visit_score_rank'];
                    $visitSuffix = rankSuffix($visitRank);
                @endphp
                @component('components.resultsRank', ['score' => $visitRank])
                @endcomponent
                <p class="text--center"><small>{{ $locationName }} ranked {{ $visitRank }}{{ $visitSuffix }} from all towns</small></p>
            </div>
        </div>
    </section>
    <section class="contentBlock pt--0">
        <h3>Factors impacting your score:</h3>
        <table class="table--striped table--factors">
            <thead>
                <tr>
                    <th class="text-left text--bold">Performance Factor</th>
                    <th class="text-center text-uppercase">Low</th>
                    <th class="text-center text-uppercase">Low-Moderate</th>
                    <th class="text-center text-uppercase">Moderate</th>
                    <th class="text-center text-uppercase">Moderate-High</th>
                    <th class="text-center text-uppercase">High</th>
                </tr>
            </thead>
            @foreach($visitData as $visitRow)
                        @if (isset($visitRow['value']) && $visitRow['value'] != 0)
            <tr>
                <td>{{ $label }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 0 && $evaluationValue <= 20) ? 'bg--red text--white' : '' }}">{{ ($evaluationValue > 0 && $evaluationValue <= 20) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 20 && $evaluationValue <= 40) ? 'bg--amber text--white' : '' }}">{{ ($evaluationValue > 20 && $evaluationValue <= 40) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 40 && $evaluationValue <= 60) ? 'bg--yellow text--white' : '' }}">{{ ($evaluationValue > 40 && $evaluationValue <= 60) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 60 && $evaluationValue <= 80) ? 'bg--lightgreen text--white' : '' }}">{{ ($evaluationValue > 60 && $evaluationValue <= 80) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 80 && $evaluationValue <= 100) ? 'bg--green text--white' : '' }}">{{ ($evaluationValue > 80 && $evaluationValue <= 100) ? $displayValue : '' }}</td>
            </tr>
            @endif
            @endforeach
        </table>
    </section>
</div>

<div class="placeAttractiveness">
    <h2 class="text-center">Your Study Scores</h2>
    <section>
        <div class="row pb--2 noMargin">
            <div class="col-8">
            <div>
                {{ $orderItem['study_scores_description'] }}
            </div>
            </div>
            <div class="col-3">
                @php
                    $studyRank = $resultData['new_study_score_rank'];
                    $studySuffix = rankSuffix($studyRank);
                @endphp
                @component('components.resultsRank', ['score' => $studyRank])
                @endcomponent
                <p class="text--center"><small>{{ $locationName }} ranked {{ $studyRank }}{{ $studySuffix }} from all towns</small></p>
            </div>
        </div>
    </section>
    <section class="mt--0 pt--0 contentBlock ">
        <h3>Factors impacting your score:</h3>
        <table class="table--striped table--factors">
            <thead>
                <tr>
                    <th class="text-left text--bold">Performance Factor</th>
                    <th class="text-center text-uppercase">Low</th>
                    <th class="text-center text-uppercase">Low-Moderate</th>
                    <th class="text-center text-uppercase">Moderate</th>
                    <th class="text-center text-uppercase">Moderate-High</th>
                    <th class="text-center text-uppercase">High</th>
                </tr>
            </thead>
            @foreach($studyData as $studyRow)
                        @if (isset($studyRow['value']) && $studyRow['value'] != 0)
            <tr>
                <td>{{ $label }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 0 && $evaluationValue <= 20) ? 'bg--red text--white' : '' }}">{{ ($evaluationValue > 0 && $evaluationValue <= 20) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 20 && $evaluationValue <= 40) ? 'bg--amber text--white' : '' }}">{{ ($evaluationValue > 20 && $evaluationValue <= 40) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 40 && $evaluationValue <= 60) ? 'bg--yellow text--white' : '' }}">{{ ($evaluationValue > 40 && $evaluationValue <= 60) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 60 && $evaluationValue <= 80) ? 'bg--lightgreen text--white' : '' }}">{{ ($evaluationValue > 60 && $evaluationValue <= 80) ? $displayValue : '' }}</td>
                <td class="text-center text--medium {{ ($evaluationValue > 80 && $evaluationValue <= 100) ? 'bg--green text--white' : '' }}">{{ ($evaluationValue > 80 && $evaluationValue <= 100) ? $displayValue : '' }}</td>
            </tr>
            @endif
            @endforeach
        </table>
    </section>
</div>

@pageBreak

<div class="dataPointsReviewed">
    <h2 class="text-center">Datapoints Reviewed</h2>

    <section class="mt--0 pt--0 contentBlock ">
        <table class="table--datapoints">
            <tr>
                <td><div class="text--bold">Your Investment Scores</div></td>
                <td class="text-left">
                    <div>
                        @if(isset($orderItem['datapoints_review']['invest']) && !empty($orderItem['datapoints_review']['invest']))
                            {{ $orderItem['datapoints_review']['invest'] }}
                        @endif
                    </div>
                </td>
            </tr>
            <tr>
                <td><div class="text--bold">Your Live Scores</div></td>
                <td class="text-left">
                    <div>
                        @if(isset($orderItem['datapoints_review']['live']) && !empty($orderItem['datapoints_review']['live']))
                            {{ $orderItem['datapoints_review']['live'] }}
                        @endif
                    </div>
                </td>
            </tr>
            <tr>
                <td><div class="text--bold">Your Visit Scores</div></td>
                <td class="text-left">
                    <div>
                        @if(isset($orderItem['datapoints_review']['visit']) && !empty($orderItem['datapoints_review']['visit']))
                            {{ $orderItem['datapoints_review']['visit'] }}
                        @endif
                    </div>
                </td>
            </tr>
            <tr>
                <td><div class="text--bold">Your Study Scores</div></td>
                <td class="text-left">
                    <div>
                        @if(isset($orderItem['datapoints_review']['study']) && !empty($orderItem['datapoints_review']['study']))
                            {{ $orderItem['datapoints_review']['study'] }}
                        @endif
                    </div>
                </td>
            </tr>
            <tr>
                <td><div class="text--bold">Qualitative Factors</div></td>
                <td class="text-left">
                    <div>
                        @if(isset($orderItem['datapoints_review']['qualitative']) && !empty($orderItem['datapoints_review']['qualitative']))
                            {{ $orderItem['datapoints_review']['qualitative'] }}
                        @endif
                    </div>
                </td>
            </tr>
            <tr>
                <td><div class="text--bold">Overall Place Attractiveness</div></td>
                <td class="text-left">
                    <div>
                        @if(isset($orderItem['datapoints_review']['overall_attractiveness']) && !empty($orderItem['datapoints_review']['overall_attractiveness']))
                            {{ $orderItem['datapoints_review']['overall_attractiveness'] }}
                        @endif
                    </div>
                </td>
            </tr>
        </table>
    </section>
</div>
@pageBreak

{{-- <div class="placePerceptions contentBlock contentBlock--wide">
    <h2>Place Perceptions</h2>
    <div class="detailsBlock">
        Details
    </div>
</div> --}}
<div class="sdg mt--2 contentBlock contentBlock--wide  faintBlue ">
    <h2>Your qualitative scores</h2>
    <div class="sdgScores">
        Your alignment to SDG Goals
        <table class="table--sdg">
            <tr>
                @foreach($orderItem['sdg_alignment'] as $sdgValue)
                    <td><img src="{{ asset('images/sdg/sdg_' . $sdgValue . '.png') }}" alt="SDG {{ $sdgValue }}"></td>
                @endforeach
            </tr>
        </table>
    </div>
    <div class="detailsBlock">
        Details
    </div>
</div>
@pageBreak
<div class="placePerceptions contentBlock contentBlock--wide">
    <h2>The Vista Segmentation</h2>
    vista_segmentation.invest.title
    vista_segmentation.invest.description

    vista_segmentation.live.title
    vista_segmentation.live.description

    vista_segmentation.visit.title
    vista_segmentation.visit.description

    vista_segmentation.study.title
    vista_segmentation.study.description

        <table class="table--segment">
            <tr>
                <td class="text--center">
                    <img src="{{ asset('images/report/invest.png') }}" alt="Invest">
                    @if(isset($vistaSegmentation['invest']['title']) && isset($vistaSegmentation['invest']['description']))
                        <h3>{{ $vistaSegmentation['invest']['title'] }}</h3>
                        <p>{{ $vistaSegmentation['invest']['description'] }}</p>
                    @else
                        <h3>Enterprise Reboot</h3>
                        <ul>
                            <li>Poor track record in foreign investment / economic development efforts need to be focussed on enterprise</li>
                            <li>Lower levels of educational attainment</li>
                            <li>Higher levels of social deprivation</li>
                            <li>Poorer performing local economies</li>
                        </ul>
                    @endif
                </td>
                <td class="text--center">
                    <img src="{{ asset('images/report/live.png') }}" alt="Live">
                    @if(isset($vistaSegmentation['live']['title']) && isset($vistaSegmentation['live']['description']))
                        <h3>{{ $vistaSegmentation['live']['title'] }}</h3>
                        <p>{{ $vistaSegmentation['live']['description'] }}</p>
                    @else
                        <h3>Shabby Chic</h3>
                        <ul>
                            <li>Often heritage, old industrial and transport hubs that were built up around ports or a specific industry</li>
                            <li>Some regeneration efforts under way</li>
                            <li>Impacted by demise of retail but some other attractions</li>
                            <li>Strong night time economies limited to weekend</li>
                        </ul>
                    @endif
                </td>
                <td class="text--center">
                    <img src="{{ asset('images/report/visit.png') }}" alt="Visit">
                    @if(isset($vistaSegmentation['visit']['title']) && isset($vistaSegmentation['visit']['description']))
                        <h3>{{ $vistaSegmentation['visit']['title'] }}</h3>
                        <p>{{ $vistaSegmentation['visit']['description'] }}</p>
                    @else
                        <h3>Britpop</h3>
                        <ul>
                            <li>Smaller areas with historic context and buildings</li>
                            <li>Functional coastal towns</li>
                            <li>Major regional hubs with strong leisure and hospitality offer</li>
                            <li>Attractive for day trippers</li>
                        </ul>
                    @endif
                </td>
                <td class="text--center">
                    <img src="{{ asset('images/report/study.png') }}" alt="Study">
                    @if(isset($vistaSegmentation['study']['title']) && isset($vistaSegmentation['study']['description']))
                        <h3>{{ $vistaSegmentation['study']['title'] }}</h3>
                        <p>{{ $vistaSegmentation['study']['description'] }}</p>
                    @else
                        <h3>Home schooling</h3>
                        <ul>
                            <li>Limited student populations</li>
                            <li>Low cost of living areas and lower costs for distance learners</li>
                            <li>Local student recruitment as opposed to regional</li>
                            <li>Operating in areas with generally lower educational attainment rates</li>
                        </ul>
                    @endif
                </td>
            </tr>
        </table>

    <div class="detailsBlock">

    </div>
</div>
@pageBreak
<div class="contentBlock contentBlock--wide">
    <h2>Your actions and recommendations</h2>

        <table class="table--actions">
            <thead>
                <tr>
                    <th style="background:#85bd3b;" class="text--bold text--white text--center">Invest</th>
                    <th style="background:#f4b223;" class="text--bold text--white text--center">Live</th>
                    <th style="background:#00aeef;" class="text--bold text--white text--center">Study</th>
                    <th style="background: #0d2b3d;" class="text--bold text--white text--center">Visit</th>
                </tr>
            </thead>
            <tr>
                <td><div></div></td>
                <td><div></div></td>
                <td><div></div></td>
                <td><div></div></td>
            </tr>
        </table>
</div>